目录
  1. WIKI教程
  2. 学习jQueryUI
  3. JqueryUI - Droppable( Droppable)

JqueryUI - Droppable( Droppable)

jQueryUI提供了droppable()方法，使任何DOM元素都可以在指定目标（可拖动元素的目标）上进行删除。

语法 (Syntax)

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

$（selector，context）。droppable（options）方法

droppable (options)方法声明可以将HTML元素用作可以删除其他元素的元素。 options参数是一个对象，它指定所涉及元素的行为。

语法 (Syntax)

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

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

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

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

Sr.No. 选项和说明
1 accept
当您需要控制要删除哪些可拖动元素时，将使用此选项。 默认情况下，其值为* 。

Option - accept

当您需要控制要删除哪些可拖动元素时，将使用此选项。 默认情况下，其值为*表示droppable接受每个项目。

这可以是 -

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

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

Syntax 

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

此选项是一个String，表示在拖动一个接受的元素（ options.accept指示的元素之一）时要添加到droppable元素的一个或多个CSS类。 默认情况下，其值为false 。

Option - activeClass

此选项是一个String，表示在拖动一个接受的元素（ options.accept指示的元素之一）时要添加到droppable元素的一个或多个CSS类。 默认情况下，其值为false 。

Syntax 

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

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

Option - addClasses

设置为false时，此选项将阻止将ui-droppable类添加到droppable元素。 默认情况下，其值为true 。 在数百个元素上调用.droppable() init时，可能需要将其作为性能优化。

Syntax 

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

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

Option - disabled

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

Syntax 

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

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

Option - greedy

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

Syntax 

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

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

Option - hoverClass

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

Syntax 

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

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

Option - scope

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

Syntax 

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

此选项是一个String ，用于指定用于测试拖动器是否悬停在droppable上的模式。 默认情况下，其值为"intersect" 。

Option - tolerance

此选项是一个String ，指定可拖动元素应如何覆盖正在接受的拖放的droppable元素。 默认情况下，其值为"intersect" 。 可能的值是 -

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

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

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

  • touch - 可拖动重叠可放置的任何触摸量。

Syntax 

$( ".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，禁用和容差

以下示例演示了三个选项的使用(a) addClass (b) disabled和(c) tolerance JqueryUI的drop函数中的(c) tolerance 。 

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

新页面打开

在这里你可以看到你可以在“日本”目标和元素“来自印度的人”的目标印度上放弃元素“来自日本的人”。 类似“想要学习Java的人”的范围设置为“Java”，“想要学习Spring的人”设置为“Spring目标”。

管理外观

以下示例演示了如何使用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的标准浏览器中打开它，你应该看到以下输出 -

新页面打开

您可以注意到，在“拖动我到目标”元素的拖动或悬停（在目标上）时，更改目标元素“Drop here”的颜色。

$ (selector, context).droppable（“action”，params）方法

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

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No. 行动和描述
1 destroy

此操作会完全破坏元素的可放置功能。 元素返回到pre-init状态。

Action - destroy

此操作会完全破坏元素的可放置功能。 元素返回到pre-init状态。

Syntax 

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

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

Action - disable

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

Syntax 

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

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

Action - enable

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

Syntax 

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

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

Action - option

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

Syntax 

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

此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。

Action - option( optionName )

此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。

Syntax 

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

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

Action - option( optionName, value )

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

Syntax 

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

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

Action - option( options )

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

Syntax 

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

此操作返回包含droppable元素的jQuery对象。 此方法不接受任何参数。

此操作返回包含droppable元素的jQuery对象。 此方法不接受任何参数。

Syntax 

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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的标准浏览器中打开它，你应该看到以下输出 -

新页面打开

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

可放置元素的事件管理

除了我们在前面几节中看到的droppable（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 activate(event, ui)

当接受的可拖动元素开始拖动时，将触发此事件。 如果您想在可以放置的情况下使droppable“亮起”，这将非常有用。

Event - activate(event, ui)

当接受的可拖动元素开始拖动时，将触发此事件。 如果您想在可以放置的情况下使droppable“亮起”，这将非常有用。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • draggable - 表示可拖动元素的jQuery对象。

  • helper - 表示正在拖动的帮助程序的jQuery对象。

  • position - 作为{top，left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top，left}对象。

Syntax 

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

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

Event - create(event, ui)

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

Syntax 

$( ".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 - 作为{top，left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top，left}对象。

Syntax 

$(".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 - 作为{top，left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top，left}对象。

Syntax 

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

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

Event - out(event, ui)

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

Syntax 

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

将可接受的可拖动元素拖过droppable时会触发此事件。 这基于tolerance选项。 其中event是Event类型， ui是Object类型。

Event - over(event, ui)

将可接受的可拖动元素拖过droppable时会触发此事件。 这基于tolerance选项。 where event的类型为Event ，而ui的类型为Object可能的类型是 -

  • draggable - 表示可拖动元素的jQuery对象。

  • helper - 表示正在拖动的帮助程序的jQuery对象。

  • position - 作为{top，left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top，left}对象。

Syntax 

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

例子 (Example)

以下示例演示了删除功能期间的事件方法用法。 此示例演示了事件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的标准浏览器中打开它，你应该看到以下输出 -

新页面打开

在这里，您将注意到在拖动元素时droppable元素中的消息如何变化。

<上一篇.JqueryUI - 可拖动( Draggable)
JqueryUI - 可调整大小( Resizable).下一篇>
↑回到顶部↑
WIKI教程 @2018