HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

JqueryUI - Droppable 放置方法

jQueryUI 提供了 droppable() 方法来使任何 DOM 元素在指定的目标（可拖动元素的目标）处可放置。

语法

droppable() 方法有两种使用方式 −

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

droppable (options) 方法声明一个 HTML 元素可以用作您可以在其中放置其他元素的元素。 options 参数是一个指定所涉及元素行为的对象。

语法

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

您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −

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

下表列出了可与此方法一起使用的不同选项 −

序号 选项 & 说明
1 accept
当您需要控制哪些可拖动元素可以被放置时使用此选项。 默认情况下，它的值为 *。

Option - accept

当您需要控制哪些可拖动元素可以被放置时使用此选项。 默认情况下，它的值为 *，这意味着每个项目都被 droppable 接受。

这可以是类型 −

  • Selector − 此类型指示接受哪些可拖动元素。

  • Function − 将为页面上的每个可拖动元素调用回调函数。 如果可拖动元素被 droppable 接受，则此函数应返回 true。

语法

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

此选项是一个字符串，表示一个或多个 CSS 类，当一个接受的元素（options.accept 中指示的元素之一）被拖动时，将被添加到可放置元素中。 默认情况下，它的值为 false。

Option - activeClass

此选项是一个字符串，表示一个或多个 CSS 类，当一个接受的元素（options.accept 中指示的元素之一）被拖动时，将被添加到可放置元素中。 默认情况下，它的值为 false。

语法

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

此选项设置为 false 时将阻止将 ui-droppable 类添加到可放置元素中。 默认情况下，它的值为 true。

Option - addClasses

此选项设置为 false 时将阻止将 ui-droppable 类添加到可放置元素中。 默认情况下，它的值为 true。当在数百个元素上调用 .droppable() init 时，这可能是一种性能优化。

语法

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

当设置为 true 时，此选项将禁用 droppable。 默认情况下，它的值为 false。

Option - disabled

当设置为 true 时，此选项将禁用 droppable，即禁用项目在指定元素上的移动以及投放到这些元素中。 默认情况下，它的值为 false。

语法

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

当您需要控制要接受哪些可拖动元素放置在嵌套的可放置对象上时，使用此选项。 默认情况下，它的值为 false。 如果此选项设置为 true，则任何父级 droppables 都不会接收该元素。

Option - greedy

当您需要控制要接受哪些可拖动元素放置在嵌套的可放置对象上时，使用此选项。 默认情况下，它的值为 false。 如果此选项设置为 true，则任何父级 droppables 都不会接收该元素。

语法

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

此选项是 String，代表一个或多个 CSS 类，当接受的元素（options.accept 中指示的元素）移入时，将添加到 droppable 的元素中。 默认情况下，它的值为 false。

Option - hoverClass

此选项是 String，代表一个或多个 CSS 类，当接受的元素（options.accept 中指示的元素）移入时，将添加到 droppable 的元素中。 默认情况下，它的值为 false。

语法

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

此选项用于将可拖动元素的可放置操作限制为仅具有相同 options.scope 的项目（在 draggable (options) 中定义）。 默认情况下，它的值为 "default"。

Option - scope

此选项用于将可拖动元素的可放置操作限制为仅具有相同 options.scope 的项目（在 draggable (options) 中定义）。 默认情况下，它的值为 "default"。

语法

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

此选项是一个 String，它指定用于测试可拖动对象是否悬停在可放置对象上的模式。 默认情况下，它的值为 "intersect"。

Option - tolerance

此选项是一个 String，指定可拖动元素应如何覆盖可放置元素以接受放置。 默认情况下，它的值为 "intersect"。 可能的值是 −

  • fit − Draggable 完全覆盖了 droppable 元素。

  • intersect − Draggable 在两个方向上与可放置元素至少重叠 50%。

  • pointer − 鼠标指针与可放置元素重叠。

  • touch − Draggable 与 droppable 重叠任意数量的触摸。

语法

$( ".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.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、disabled和tolerance的使用

下面的例子演示了三个选项(a)addClass(b)disabled和(c)tolerance在JqueryUI的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-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 Touch！"上 框（只需触摸此框的边缘）并查看目标元素的变化。现在要将元素放在 "Tolerance Fit!" 目标上，可拖动元素必须与目标元素完全重叠，即"Tolerance Fit！" 目标。

选择要删除的元素

下面的例子演示了在JqueryUI的拖拽功能中accept选项和scope选项的使用。

<!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 的标准浏览器中打开它，您应该会看到以下输出。 现在你可以玩输出了 −

管理外观

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

<!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 的标准浏览器中打开它，您应该会看到以下输出 −

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

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

droppable ("action", params) 方法可以对可放置元素执行操作，例如防止可放置功能。 该操作在第一个参数中指定为字符串（例如，"disable"以防止丢弃）。 在下表中查看可以传递的操作。

语法

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

下表列出了可与此方法一起使用的不同actions操作 −

序号 操作 & 说明
1 destroy

此操作完全破坏了元素的可放置功能。 元素返回到它们的预初始化状态。

Action - destroy

此操作完全破坏了元素的可放置功能。 元素返回到它们的预初始化状态。

语法

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

此操作禁用可删除操作。 这些元素不再是可放置的元素。 此方法不接受任何参数。

Action - disable

此操作禁用可删除操作。 这些元素不再是可放置的元素。 此方法不接受任何参数。

语法

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

此操作重新激活可放置操作。 这些元素可以再次接收一个可放置的元素。 此方法不接受任何参数。

Action - enable

此操作重新激活可放置操作。 这些元素可以再次接收一个可放置的元素。 此方法不接受任何参数。

语法

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

此操作获取一个对象，其中包含表示当前可删除选项哈希的键/值对。 此方法不接受任何参数。

Action - option

此操作获取一个对象，其中包含表示当前可删除选项哈希的键/值对。 此方法不接受任何参数。

语法

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

此操作获取当前关联的具有指定 optionName 的可放置元素的值。 这需要一个字符串值作为参数。

Action - option( optionName )

此操作获取当前关联的具有指定 optionName 的可放置元素的值。 这需要一个字符串值作为参数。

语法

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

此操作设置与指定的 optionName 关联的可放置选项的值。

Action - option( optionName, value )

此操作设置与指定的 optionName 关联的可放置选项的值。 参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。

语法

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

此操作为可放置对象设置一个或多个选项。 参数 options 是要设置的选项值对的映射。

Action - 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.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 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −

序号 事件方法 & 说明
1 activate(event, ui)

当接受的可拖动元素开始拖动时触发此事件。 如果您想让可放置的可放置物在可以放置时"light up"点亮它，这将很有用。

Event - activate(event, ui)

当接受的可拖动元素开始拖动时触发此事件。 如果您想让可放置的可放置物在可以放置时"light up"亮起，这会很有用。 其中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类型。

Event - create(event, ui)

创建可放置元素时会触发此事件。 其中event是Event类型，ui是Object类型。

语法

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

当接受的可拖动对象停止拖动时触发此事件。 其中event是Event类型，ui是Object类型。

Event - 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)

当一个元素被放置在 droppable 上时，这个动作被触发。 这是基于 tolerance 选项。 其中event是Event类型，ui是Object类型。

Event - drop(event, ui)

当一个元素被放置在 droppable 上时，这个动作被触发。 这是基于 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类型。

Event - out(event, ui)

当接受的可拖动元素被拖出可放置元素时，会触发该事件。 这是基于 tolerance 选项。 其中event是Event类型，ui是Object类型。

语法

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

当接受的可拖动元素被拖动到可放置元素上时，会触发此事件。 这是基于 tolerance 选项。 其中event是Event类型，ui是Object类型。

Event - 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.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 的标准浏览器中打开它，您应该会看到以下输出 −

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

❮ 上一节 下一节 ❯