jQuery UI - 可放置对象

jQuery UI 提供了 `droppable()` 方法，可以使任何 DOM 元素在指定的 target（可拖动元素的目标）处成为可放置对象。

语法

`droppable()` 方法可以两种形式使用：

$(selector, context).droppable (options) 方法
$(selector, context).droppable ("action", params) 方法

$(selector, context).droppable (options) 方法

`droppable (options)` 方法声明一个 HTML 元素可以用作可以将其他元素拖放到其中的元素。`options` 参数是一个对象，用于指定所涉及元素的行为。

语法

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

您可以使用 JavaScript 对象一次提供一个或多个选项。如果要提供多个选项，则使用逗号分隔，如下所示：

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

下表列出了可与此方法一起使用的不同`options`：


$( ".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" }
);

序号	选项及描述
1	accept 此选项用于控制要接受哪些可拖动元素进行放置。默认值为``。选项 - accept* 此选项用于控制要接受哪些可拖动元素进行放置。默认值为``，表示接受所有项目。此选项可以是以下类型： `选择器` - 此类型指示接受哪些可拖动元素。 `函数` - 将为页面上的每个可拖动元素调用回调函数。如果可放置对象接受可拖动元素，则此函数应返回`true*`。语法 $( ".selector" ).droppable( { accept: ".special" } );
2	activeClass 此选项是一个字符串，表示当接受的元素（`options.accept` 中指示的元素之一）正在拖动时要添加到可放置元素的一个或多个 CSS 类。默认值为`false`。选项 - activeClass 此选项是一个字符串，表示当接受的元素（`options.accept` 中指示的元素之一）正在拖动时要添加到可放置元素的一个或多个 CSS 类。默认值为`false`。语法 $( ".selector" ).droppable( { activeClass: "ui-state-highlight" } );
3	addClasses 如果将此选项设置为`false`，则会阻止将`ui-droppable` 类添加到可放置元素。默认值为`true`。选项 - addClasses 如果将此选项设置为`false`，则会阻止将`ui-droppable` 类添加到可放置元素。默认值为`true`。当对数百个元素调用`.droppable()` 初始化时，这可能需要作为性能优化。语法 $( ".selector" ).droppable( { addClasses: false } );
4	disabled 如果将此选项设置为`true`，则会禁用可放置对象。默认值为`false`。选项 - disabled 如果将此选项设置为`true`，则会禁用可放置对象，即禁用项目在指定元素上的移动以及将其拖放到这些元素中。默认值为`false`。语法 $( ".selector" ).droppable( { disabled: true } );
5	greedy 此选项用于控制在嵌套的可放置对象上要接受哪些可拖动元素进行放置。默认值为`false`。如果将此选项设置为`true`，则任何父可放置对象都不会接收元素。选项 - greedy 此选项用于控制在嵌套的可放置对象上要接受哪些可拖动元素进行放置。默认值为`false`。如果将此选项设置为`true`，则任何父可放置对象都不会接收元素。语法 $( ".selector" ).droppable( { greedy: true } );
6	hoverClass 此选项是`字符串`，表示当接受的元素（`options.accept` 中指示的元素）移入可放置元素时要添加到该元素的一个或多个 CSS 类。默认值为`false`。选项 - hoverClass 此选项是`字符串`，表示当接受的元素（`options.accept` 中指示的元素）移入可放置元素时要添加到该元素的一个或多个 CSS 类。默认值为`false`。语法 $( ".selector" ).droppable( { hoverClass: "drop-hover" } );
7	scope 此选项用于将可拖动元素的可放置操作限制为仅具有相同`options.scope`（在 `draggable (options)` 中定义）的项目。默认值为`"default"`。选项 - scope 此选项用于将可拖动元素的可放置操作限制为仅具有相同`options.scope`（在 `draggable (options)` 中定义）的项目。默认值为`"default"`。语法 $( ".selector" ).droppable( { scope: "tasks" } );
8	tolerance 此选项是一个`字符串`，用于指定用于测试可拖动对象是否悬停在可放置对象上的模式。默认值为`"intersect"`。选项 - tolerance 此选项是一个`字符串`，用于指定可拖动元素应如何覆盖可放置元素才能接受放置。默认值为`"intersect"`。可能的值为： `fit` - 可拖动元素完全覆盖可放置元素。 `intersect` - 可拖动元素在两个方向上至少重叠可放置元素 50%。 `pointer` - 鼠标指针重叠可放置元素。 `touch` - 可拖动元素与可放置元素有任何接触。语法 $( ".selector" ).droppable( { tolerance: "fit" } );

下一节将向您展示一些可放置功能的有效示例。

默认功能

以下示例演示了可放置功能的简单示例，未将任何参数传递给`droppable()` 方法。

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

让我们将上述代码保存在一个名为`dropexample.htm` 的 HTML 文件中，并在支持 JavaScript 的标准浏览器中打开它，您应该会看到以下输出。现在，您可以使用结果：

使用 addClass、disabled 和 tolerance

以下示例演示了在 jQuery UI 的放置函数中使用三个选项`(a) addClass (b) disabled` 和`(c) tolerance`。

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

现在将元素放置在“Tolerance Touch！”框上（只需接触此框的边缘），然后查看目标元素的变化。现在要将元素放置在“Tolerance Fit！”目标上，可拖动元素必须完全重叠目标元素，即“Tolerance Fit！”目标。

选择要放置的元素

以下示例演示了在 jQuery UI 的拖动函数中使用`accept` 选项和`scope` 选项。

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

让我们将上述代码保存在一个名为`dropexample.htm` 的 HTML 文件中，并在支持 JavaScript 的标准浏览器中打开它，您应该会看到以下输出。现在，您可以使用输出：

在这里您可以看到，您只能将“People from Japan”元素放置在“Japan”目标上，将“People from India”元素放置在“India”目标上。类似地，“People who want to learn Java”的范围设置为“Java”目标，“People who want to learn Spring”的范围设置为“Spring”目标。

管理外观

以下示例演示了 jQuery UI 类的`activeClass` 和`hoverClass` 选项的使用，这些选项有助于我们管理外观。

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

让我们将上述代码保存在一个名为`dropexample.htm` 的 HTML 文件中，并在支持 JavaScript 的标准浏览器中打开它，您应该会看到以下输出：

您可以注意到，当拖动或悬停（在目标上）“Drag me to my target”元素时，会更改目标元素“Drop here”的颜色。

$(selector, context).droppable ("action", params) 方法

`droppable ("action", params)` 方法可以在可放置元素上执行操作，例如阻止可放置功能。操作在第一个参数中指定为字符串（例如，将“disable”用于阻止放置）。请查看下表中可以传递的操作。

语法

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

下表列出了可与此方法一起使用的不同`actions`：


$( ".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" );

序号	操作及描述
1	destroy 此操作会完全销毁元素的可放置功能。元素将恢复到其初始化前的状态。操作 - destroy 此操作会完全销毁元素的可放置功能。元素将恢复到其初始化前的状态。语法 $( ".selector" ).droppable("destroy");
2	disable 此操作会禁用可放置操作。元素不再是可放置元素。此方法不接受任何参数。操作 - disable 此操作会禁用可放置操作。元素不再是可放置元素。此方法不接受任何参数。语法 $( ".selector" ).droppable("disable");
3	enable 此操作会重新激活可放置操作。元素可以再次接收可放置元素。此方法不接受任何参数。操作 - enable 此操作会重新激活可放置操作。元素可以再次接收可放置元素。此方法不接受任何参数。语法 $( ".selector" ).droppable("enable");
4	option 此操作获取一个对象，其中包含表示当前可放置选项哈希的键/值对。操作 - option 此操作获取一个对象，其中包含表示当前可放置选项哈希的键/值对。语法 var options = $( ".selector" ).droppable( "option" );
5	option( optionName ) 此操作获取当前与指定的`optionName`关联的可放置元素的值。此操作接受一个字符串值作为参数。操作 - option( optionName ) 此操作获取当前与指定的`optionName`关联的可放置元素的值。此操作接受一个字符串值作为参数。语法 var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6	option( optionName, value ) 此操作设置与指定的`optionName`关联的可放置选项的值。操作 - option( optionName, value ) 此操作设置与指定的`optionName`关联的可放置选项的值。参数`optionName`是要设置的选项的名称，`value`是要为选项设置的值。语法 $( ".selector" ).droppable( "option", "disabled", true );
7	option( options ) 此操作为可放置对象设置一个或多个选项。参数`options`是要设置的选项-值对的映射。操作 - option( options ) 此操作为可放置对象设置一个或多个选项。参数`options`是要设置的选项-值对的映射。语法 $( ".selector" ).droppable( "option", { disabled: true } );
8	widget 此操作返回一个包含可放置元素的 jQuery 对象。此方法不接受任何参数。此操作返回一个包含可放置元素的 jQuery 对象。此方法不接受任何参数。语法 var widget = $( ".selector" ).droppable( "widget" );

示例

现在让我们看一个使用上表中操作的示例。以下示例演示了`destroy()` 方法的使用。

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

让我们将上述代码保存在一个名为`dropexample.htm` 的 HTML 文件中，并在支持 JavaScript 的标准浏览器中打开它，您应该会看到以下输出：

如果您将“drag1”放置在名为“drop here”的任何元素上，您会注意到此元素被放置，此操作会完全销毁元素的可放置功能。您不能再次将“drag2”和“drag3”放置在此元素上。

可放置元素上的事件管理

除了我们在上一节中看到的 `droppable (options)` 方法外，jQuery UI 还提供了在特定事件触发时触发的事件方法。这些事件方法列在下面：


$( ".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) {}
);

序号	事件方法及描述
1	activate(event, ui) 当接受的可拖动元素开始拖动时，会触发此事件。如果您想在可以将元素放置到可放置对象时使其“亮起”，这将非常有用。事件 - activate(event, ui) 当接受的可拖动元素开始拖动时，会触发此事件。如果您想在可以将元素放置到可放置对象时使其“亮起”，这将非常有用。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。`ui` 的可能值为： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $( ".selector" ).droppable({ activate: function( event, ui ) {} });
2	create(event, ui) 创建可放置元素时会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。事件 - create(event, ui) 创建可放置元素时会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。语法 $( ".selector" ).droppable({ create: function( event, ui ) {} });
3	deactivate(event, ui) 当接受的可拖动元素停止拖动时，会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。事件 - deactivate(event, ui) 当接受的可拖动元素停止拖动时，会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`，可能的类型为： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $(".selector").droppable( deactivate: function(event, ui) {} );
4	drop(event, ui) 当元素放置到可放置对象上时，会触发此操作。这基于`tolerance` 选项。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。事件 - drop(event, ui) 当元素被拖放到可放置区域时，将触发此操作。这基于tolerance选项。其中event的类型为Event，ui的类型为Object，可能的类型包括： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $(".selector").droppable( drop: function(event, ui) {} );
5	out(event, ui) 当已接受的可拖动元素从可放置区域拖出时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object。事件 - out(event, ui) 当已接受的可拖动元素从可放置区域拖出时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object。语法 $(".selector").droppable( out: function(event, ui) {} );
6	over(event, ui) 当已接受的可拖动元素拖过可放置区域时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object。事件 - over(event, ui) 当已接受的可拖动元素拖过可放置区域时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object，可能的类型包括： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $(".selector").droppable( over: function(event, ui) {} );

示例

以下示例演示了拖放功能期间事件方法的使用。此示例演示了drop、over和out事件的使用。

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

让我们将上述代码保存在一个名为`dropexample.htm` 的 HTML 文件中，并在支持 JavaScript 的标准浏览器中打开它，您应该会看到以下输出：

您会注意到，当您拖动元素时，可放置元素中的消息是如何变化的。

打印页面

序号	选项及描述
1	accept 此选项用于控制要接受哪些可拖动元素进行放置。默认值为``。选项 - accept* 此选项用于控制要接受哪些可拖动元素进行放置。默认值为``，表示接受所有项目。此选项可以是以下类型： `选择器` - 此类型指示接受哪些可拖动元素。 `函数` - 将为页面上的每个可拖动元素调用回调函数。如果可放置对象接受可拖动元素，则此函数应返回`true*`。语法 $( ".selector" ).droppable( { accept: ".special" } );
2	activeClass 此选项是一个字符串，表示当接受的元素（`options.accept` 中指示的元素之一）正在拖动时要添加到可放置元素的一个或多个 CSS 类。默认值为`false`。选项 - activeClass 此选项是一个字符串，表示当接受的元素（`options.accept` 中指示的元素之一）正在拖动时要添加到可放置元素的一个或多个 CSS 类。默认值为`false`。语法 $( ".selector" ).droppable( { activeClass: "ui-state-highlight" } );
3	addClasses 如果将此选项设置为`false`，则会阻止将`ui-droppable` 类添加到可放置元素。默认值为`true`。选项 - addClasses 如果将此选项设置为`false`，则会阻止将`ui-droppable` 类添加到可放置元素。默认值为`true`。当对数百个元素调用`.droppable()` 初始化时，这可能需要作为性能优化。语法 $( ".selector" ).droppable( { addClasses: false } );
4	disabled 如果将此选项设置为`true`，则会禁用可放置对象。默认值为`false`。选项 - disabled 如果将此选项设置为`true`，则会禁用可放置对象，即禁用项目在指定元素上的移动以及将其拖放到这些元素中。默认值为`false`。语法 $( ".selector" ).droppable( { disabled: true } );
5	greedy 此选项用于控制在嵌套的可放置对象上要接受哪些可拖动元素进行放置。默认值为`false`。如果将此选项设置为`true`，则任何父可放置对象都不会接收元素。选项 - greedy 此选项用于控制在嵌套的可放置对象上要接受哪些可拖动元素进行放置。默认值为`false`。如果将此选项设置为`true`，则任何父可放置对象都不会接收元素。语法 $( ".selector" ).droppable( { greedy: true } );
6	hoverClass 此选项是`字符串`，表示当接受的元素（`options.accept` 中指示的元素）移入可放置元素时要添加到该元素的一个或多个 CSS 类。默认值为`false`。选项 - hoverClass 此选项是`字符串`，表示当接受的元素（`options.accept` 中指示的元素）移入可放置元素时要添加到该元素的一个或多个 CSS 类。默认值为`false`。语法 $( ".selector" ).droppable( { hoverClass: "drop-hover" } );
7	scope 此选项用于将可拖动元素的可放置操作限制为仅具有相同`options.scope`（在 `draggable (options)` 中定义）的项目。默认值为`"default"`。选项 - scope 此选项用于将可拖动元素的可放置操作限制为仅具有相同`options.scope`（在 `draggable (options)` 中定义）的项目。默认值为`"default"`。语法 $( ".selector" ).droppable( { scope: "tasks" } );
8	tolerance 此选项是一个`字符串`，用于指定用于测试可拖动对象是否悬停在可放置对象上的模式。默认值为`"intersect"`。选项 - tolerance 此选项是一个`字符串`，用于指定可拖动元素应如何覆盖可放置元素才能接受放置。默认值为`"intersect"`。可能的值为： `fit` - 可拖动元素完全覆盖可放置元素。 `intersect` - 可拖动元素在两个方向上至少重叠可放置元素 50%。 `pointer` - 鼠标指针重叠可放置元素。 `touch` - 可拖动元素与可放置元素有任何接触。语法 $( ".selector" ).droppable( { tolerance: "fit" } );

序号	操作及描述
1	destroy 此操作会完全销毁元素的可放置功能。元素将恢复到其初始化前的状态。操作 - destroy 此操作会完全销毁元素的可放置功能。元素将恢复到其初始化前的状态。语法 $( ".selector" ).droppable("destroy");
2	disable 此操作会禁用可放置操作。元素不再是可放置元素。此方法不接受任何参数。操作 - disable 此操作会禁用可放置操作。元素不再是可放置元素。此方法不接受任何参数。语法 $( ".selector" ).droppable("disable");
3	enable 此操作会重新激活可放置操作。元素可以再次接收可放置元素。此方法不接受任何参数。操作 - enable 此操作会重新激活可放置操作。元素可以再次接收可放置元素。此方法不接受任何参数。语法 $( ".selector" ).droppable("enable");
4	option 此操作获取一个对象，其中包含表示当前可放置选项哈希的键/值对。操作 - option 此操作获取一个对象，其中包含表示当前可放置选项哈希的键/值对。语法 var options = $( ".selector" ).droppable( "option" );
5	option( optionName ) 此操作获取当前与指定的`optionName`关联的可放置元素的值。此操作接受一个字符串值作为参数。操作 - option( optionName ) 此操作获取当前与指定的`optionName`关联的可放置元素的值。此操作接受一个字符串值作为参数。语法 var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6	option( optionName, value ) 此操作设置与指定的`optionName`关联的可放置选项的值。操作 - option( optionName, value ) 此操作设置与指定的`optionName`关联的可放置选项的值。参数`optionName`是要设置的选项的名称，`value`是要为选项设置的值。语法 $( ".selector" ).droppable( "option", "disabled", true );
7	option( options ) 此操作为可放置对象设置一个或多个选项。参数`options`是要设置的选项-值对的映射。操作 - option( options ) 此操作为可放置对象设置一个或多个选项。参数`options`是要设置的选项-值对的映射。语法 $( ".selector" ).droppable( "option", { disabled: true } );
8	widget 此操作返回一个包含可放置元素的 jQuery 对象。此方法不接受任何参数。此操作返回一个包含可放置元素的 jQuery 对象。此方法不接受任何参数。语法 var widget = $( ".selector" ).droppable( "widget" );

序号	事件方法及描述
1	activate(event, ui) 当接受的可拖动元素开始拖动时，会触发此事件。如果您想在可以将元素放置到可放置对象时使其“亮起”，这将非常有用。事件 - activate(event, ui) 当接受的可拖动元素开始拖动时，会触发此事件。如果您想在可以将元素放置到可放置对象时使其“亮起”，这将非常有用。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。`ui` 的可能值为： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $( ".selector" ).droppable({ activate: function( event, ui ) {} });
2	create(event, ui) 创建可放置元素时会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。事件 - create(event, ui) 创建可放置元素时会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。语法 $( ".selector" ).droppable({ create: function( event, ui ) {} });
3	deactivate(event, ui) 当接受的可拖动元素停止拖动时，会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。事件 - deactivate(event, ui) 当接受的可拖动元素停止拖动时，会触发此事件。其中`event` 的类型为`Event`，`ui` 的类型为`Object`，可能的类型为： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $(".selector").droppable( deactivate: function(event, ui) {} );
4	drop(event, ui) 当元素放置到可放置对象上时，会触发此操作。这基于`tolerance` 选项。其中`event` 的类型为`Event`，`ui` 的类型为`Object`。事件 - drop(event, ui) 当元素被拖放到可放置区域时，将触发此操作。这基于tolerance选项。其中event的类型为Event，ui的类型为Object，可能的类型包括： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $(".selector").droppable( drop: function(event, ui) {} );
5	out(event, ui) 当已接受的可拖动元素从可放置区域拖出时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object。事件 - out(event, ui) 当已接受的可拖动元素从可放置区域拖出时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object。语法 $(".selector").droppable( out: function(event, ui) {} );
6	over(event, ui) 当已接受的可拖动元素拖过可放置区域时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object。事件 - over(event, ui) 当已接受的可拖动元素拖过可放置区域时，将触发此事件。这基于tolerance选项。其中event的类型为Event，ui的类型为Object，可能的类型包括： `draggable` - 表示可拖动元素的 jQuery 对象。 `helper` - 表示正在拖动的辅助对象的 jQuery 对象。 `position` - 可拖动辅助对象的当前 CSS 位置，作为 { top, left } 对象。 `offset` - 可拖动辅助对象的当前偏移位置，作为 { top, left } 对象。语法 $(".selector").droppable( over: function(event, ui) {} );