JqueryUI — Droppable

Метод $ (селектор, контекст) .droppable (параметры)

Метод droppable (options) объявляет, что HTML-элемент может использоваться как элемент, в который можно добавлять другие элементы. Параметр options — это объект, который определяет поведение задействованных элементов.

Синтаксис

$(selector, context).droppable (options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).droppable({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

$( ".selector" ).droppable(
   { accept: ".special" }
);

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);

$( ".selector" ).droppable(
   { addClasses: false }
);

$( ".selector" ).droppable(
   { disabled: true }
);

$( ".selector" ).droppable(
   { greedy: true }
);

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);

$( ".selector" ).droppable(
   { scope: "tasks" }
);

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

Вариант — принять

Эта опция используется, когда вам нужно контролировать, какие перетаскиваемые элементы должны быть приняты для отбрасывания. По умолчанию его значение равно *, что означает, что каждый элемент может быть сброшен.

Это может быть типа —

Селектор — этот тип указывает, какие перетаскиваемые элементы принимаются.

Функция — функция обратного вызова будет вызываться для каждого перетаскиваемого элемента на странице. Эта функция должна возвращать true, если перетаскиваемый элемент принимается droppable.

Синтаксис

Этот параметр представляет собой строку, представляющую один или несколько классов CSS, которые необходимо добавить к элементу droppable при перетаскивании принятого элемента (один из указанных в options.accept ). По умолчанию его значение равно false .

Опция — активный класс

Этот параметр представляет собой строку, представляющую один или несколько классов CSS, которые необходимо добавить к элементу droppable при перетаскивании принятого элемента (один из указанных в options.accept ). По умолчанию его значение равно false .

Синтаксис

Эта опция, когда установлено в false , предотвратит добавление класса ui-droppable к элементам droppable. По умолчанию его значение равно true .

Опция — addClasses

Эта опция, когда установлено в false , предотвратит добавление класса ui-droppable к элементам droppable. По умолчанию его значение равно true . Это может быть желательно в качестве оптимизации производительности при вызове .droppable () init для сотен элементов.

Синтаксис

Эта опция, если установлено значение true, отключает сброс. По умолчанию его значение равно false .

Опция — отключена

Этот параметр, если задано значение true, отключает опускание, т. Е. Отключает перемещение элемента над указанными элементами и опускание в эти элементы. По умолчанию его значение равно false .

Синтаксис

Эта опция используется, когда вам нужно контролировать, какие перетаскиваемые элементы должны приниматься для размещения на вложенных сбрасываемых элементах. По умолчанию его значение равно false . Если для этой опции задано значение true , любые родительские элементы сброса не будут получать элемент.

Вариант — жадный

Эта опция используется, когда вам нужно контролировать, какие перетаскиваемые элементы должны приниматься для размещения на вложенных сбрасываемых элементах. По умолчанию его значение равно false . Если для этой опции задано значение true , любые родительские элементы сброса не будут получать элемент.

Синтаксис

Эта опция — String, представляющая один или несколько CSS-классов, которые будут добавлены к элементу droppable, когда принятый элемент (элемент, указанный в options.accept ) перемещается в него. По умолчанию его значение равно false .

Опция — hoverClass

Эта опция — String, представляющая один или несколько CSS-классов, которые будут добавлены к элементу droppable, когда принятый элемент (элемент, указанный в options.accept ) перемещается в него. По умолчанию его значение равно false .

Синтаксис

Эта опция используется, чтобы ограничить действие перетаскивания перетаскиваемых элементов только для элементов, которые имеют тот же options.scope (определенный в draggable (опции)). По умолчанию его значением является «по умолчанию» .

Вариант — сфера

Эта опция используется, чтобы ограничить действие перетаскивания перетаскиваемых элементов только для элементов, которые имеют тот же options.scope (определенный в draggable (опции)). По умолчанию его значением является «по умолчанию» .

Синтаксис

Этот параметр представляет собой строку, которая указывает, какой режим использовать для проверки, находится ли перетаскиваемый объект над опускаемым. По умолчанию его значение равно «пересечь» .

Вариант — толерантность

Этот параметр представляет собой строку, которая указывает, как перетаскиваемый элемент должен покрывать элемент сбрасывания для принимаемого отбрасывания. По умолчанию его значение равно «пересечь» . Возможные значения —

fit — Draggable полностью закрывает раскрывающийся элемент.

Пересечение — Draggable перекрывает выпадающий элемент не менее чем на 50% в обоих направлениях.

указатель — указатель мыши перекрывает сбрасываемый элемент.

Прикосновение — перетаскивание перекрывает каплю любого количества касания.

Синтаксис

Следующий раздел покажет вам несколько рабочих примеров функциональности отбрасывания.

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности droppable, не передавая параметры методу droppable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dropexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Использование addClass, отключено и допуск

В следующем примере демонстрируется использование трех опций (a) addClass (b) отключен и (c) допуск в функции отбрасывания JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dropexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Теперь бросьте элемент на «Допуск касания!» поле (просто коснитесь края этого поля) и посмотрите изменения целевого элемента. Теперь добавьте элемент «Tolerance Fit!» target, перетаскиваемый элемент должен полностью перекрывать целевой элемент, то есть «Tolerance Fit!» цель.

Выберите элементы для удаления

В следующем примере демонстрируется использование опции accept и option scope в функции перетаскивания JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
				
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dropexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с выходом —

Здесь вы можете видеть, что вы можете добавить элемент «Люди из Японии» только на цель «Япония» и элемент «Люди из Индии» на цель Индия. Аналогично, область «Люди, которые хотят изучать Java» настроена на «Java», а «Люди, которые хотят изучать Spring» установлена ​​на «Spring target».

Управление внешностью

В следующем примере демонстрируется использование параметров activeClass и hoverClass класса JqueryUI, которые помогают нам управлять внешним видом.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dropexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

Вы можете заметить, что при перетаскивании или наведении (над целью) элемента «Перетащите меня в мою цель» изменяется цвет целевого элемента «Перетащите сюда».

Метод $ (селектор, контекст) .droppable («действие», params)

Метод droppable («action», params) может выполнять действие с элементами drop-to-drop, например, предотвращать функцию drop-drop. Действие указывается в виде строки в первом аргументе (например, «отключить», чтобы предотвратить отбрасывание). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис

$(selector, context).droppable ("action", params);;

В следующей таблице перечислены различные действия, которые можно использовать с этим методом —

$( ".selector" ).droppable("destroy");

$( ".selector" ).droppable("disable");

$( ".selector" ).droppable("enable");

var options = $( ".selector" ).droppable( "option" );

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );

$( ".selector" ).droppable( "option", "disabled", true );

$( ".selector" ).droppable( "option", { disabled: true } );

var widget = $( ".selector" ).droppable( "widget" );

Это действие полностью уничтожает функциональность элемента. Элементы возвращаются в состояние до инициализации.

Действие — уничтожить

Это действие полностью уничтожает функциональность элемента. Элементы возвращаются в состояние до инициализации.

Синтаксис

Это действие отключает операцию сбрасывания. Элементы больше не являются сбрасываемыми элементами. Этот метод не принимает никаких аргументов.

Действие — отключить

Это действие отключает операцию сбрасывания. Элементы больше не являются сбрасываемыми элементами. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие активирует операцию сбрасывания. Элементы могут снова получить сбрасываемый элемент. Этот метод не принимает никаких аргументов.

Действие — включить

Это действие активирует операцию сбрасывания. Элементы могут снова получить сбрасываемый элемент. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш опускаемых опций. Этот метод не принимает никаких аргументов.

Действие — опция

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш опускаемых опций. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает значение связанного в настоящее время элемента droppable с указанным параметром optionName . Это принимает строковое значение в качестве аргумента.

Действие — опция (optionName)

Это действие возвращает значение связанного в настоящее время элемента droppable с указанным параметром optionName . Это принимает строковое значение в качестве аргумента.

Синтаксис

Это действие устанавливает значение параметра droppable, связанного с указанным параметром optionName .

Действие — опция (optionName, value)

Это действие устанавливает значение параметра droppable, связанного с указанным параметром optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.

Синтаксис

Это действие устанавливает один или несколько параметров для сбрасывания. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для сбрасывания. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Синтаксис

Это действие возвращает объект jQuery, содержащий элемент droppable. Этот метод не принимает никаких аргументов.

Это действие возвращает объект jQuery, содержащий элемент droppable. Этот метод не принимает никаких аргументов.

Синтаксис

пример

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование метода destroy () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dropexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

Если вы уроните «drag1» на любом из элементов с именем «drop here», вы заметите, что этот элемент отбрасывается, и это действие полностью уничтожает функциональность элемента, подлежащего удалению. Вы не можете сбросить «drag2» и «drag3» на этот элемент снова.

Управление событиями на сбрасываемых элементах

В дополнение к методу droppable (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже —

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});

$(".selector").droppable(
   deactivate: function(event, ui) {}
);

$(".selector").droppable(
   drop: function(event, ui) {}
);

$(".selector").droppable(
   out: function(event, ui) {}
);

$(".selector").droppable(
   over: function(event, ui) {}
);

Это событие срабатывает, когда принятый перетаскиваемый элемент начинает перетаскивание. Это может быть полезно, если вы хотите, чтобы капля «загорелась», когда ее можно бросить.

Событие — активировать (событие, пользовательский интерфейс)

Это событие срабатывает, когда принятый перетаскиваемый элемент начинает перетаскивание. Это может быть полезно, если вы хотите, чтобы капля «загорелась», когда ее можно бросить. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

draggable — объект jQuery, представляющий перетаскиваемый элемент.

helper — объект jQuery, представляющий перетаскиваемый помощник.

position — текущая позиция CSS перетаскиваемого помощника как объекта {top, left}.

offset — текущая позиция смещения перетаскиваемого помощника как объекта {top, left}.

Синтаксис

Это событие срабатывает при создании элемента, который можно сбрасывать. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании элемента, который можно сбрасывать. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие срабатывает, когда принятый перетаскиваемый элемент перестает перетаскивать. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — деактивировать (событие, пользовательский интерфейс)

Это событие срабатывает, когда принятый перетаскиваемый элемент перестает перетаскивать. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта и возможные типы —

draggable — объект jQuery, представляющий перетаскиваемый элемент.

helper — объект jQuery, представляющий перетаскиваемый помощник.

position — текущая позиция CSS перетаскиваемого помощника как объекта {top, left}.

offset — текущая позиция смещения перетаскиваемого помощника как объекта {top, left}.

Синтаксис

Это действие срабатывает, когда элемент сбрасывается на предмет сброса. Это основано на допуске . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — падение (событие, пользовательский интерфейс)

Это действие срабатывает, когда элемент сбрасывается на предмет сброса. Это основано на допуске . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта и возможные типы —

draggable — объект jQuery, представляющий перетаскиваемый элемент.

helper — объект jQuery, представляющий перетаскиваемый помощник.

position — текущая позиция CSS перетаскиваемого помощника как объекта {top, left}.

offset — текущая позиция смещения перетаскиваемого помощника как объекта {top, left}.

Синтаксис

Это событие срабатывает, когда принятый перетаскиваемый элемент перетаскивается из элемента сбрасывания. Это основано на допуске . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — выход (событие, пользовательский интерфейс)

Это событие запускается, когда принятый перетаскиваемый элемент перетаскивается из сбрасываемого предмета. Это основано на допуске . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие срабатывает, когда принятый перетаскиваемый элемент перетаскивается поверх элемента сбрасывания. Это основано на допуске . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — окончено (событие, интерфейс)

Это событие срабатывает, когда принятый перетаскиваемый элемент перетаскивается поверх элемента сбрасывания. Это основано на допуске . Где событие имеет тип события , и пользовательский интерфейс имеет тип объекта. И возможные типы —

draggable — объект jQuery, представляющий перетаскиваемый элемент.

helper — объект jQuery, представляющий перетаскиваемый помощник.

position — текущая позиция CSS перетаскиваемого помощника как объекта {top, left}.

offset — текущая позиция смещения перетаскиваемого помощника как объекта {top, left}.

Синтаксис

пример

В следующем примере демонстрируется использование метода события во время удаления функциональности. Этот пример демонстрирует использование событий drop , снова и снова .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
					
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dropexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

Здесь вы заметите, как меняется сообщение в элементе droppable при перетаскивании элемента.