JqueryUI - 可删除

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

句法

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

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

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

句法

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

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

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

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

先生。 选项和说明
1 接受
当您需要控制接受放置哪些可拖动元素时，请使用此选项。默认情况下其值为*。

选项-接受

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

这可以是类型 -

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

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

句法

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 活动类

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

选项 - activeClass

This option is a String representing one or more CSS classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. By default its value is false.

Syntax

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

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

Option - addClasses

This option when set to false will prevent the ui-droppable class from being added to the droppable elements. By default its value is true. This may be desired as a performance optimization when calling .droppable() init on hundreds of elements.

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 残疾人

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

Option - disabled

This option when set to true disables the droppable i.e disables movement of item over the specified elements and the drop into those elements. By default its value is false.

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 贪婪的

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

Option - greedy

This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. By default its value is false. If this option is set to true, any parent droppables will not receive the element.

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 悬停类

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

Option - hoverClass

This option is String representing one or more CSS classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. By default its value is false.

Syntax

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

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

Option - scope

This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). By default its value is "default".

Syntax

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

此选项是一个字符串，指定使用哪种模式来测试可拖动项是否悬停在可放置项上。默认情况下它的值为"intersect"。

Option - tolerance

This option is a String that specifies how the draggable element should cover the droppable element for the drop being accepted. By default its value is "intersect". Possible values are −

  • fit − Draggable covers the droppable element in full.

  • intersect − Draggable overlaps the droppable element at least 50% in both directions.

  • pointer − Mouse pointer overlaps the droppable element.

  • touch − Draggable overlaps the droppable any amount of touching.

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、disabled和tolerance的使用

下面的示例演示了JqueryUI 的 drop 函数中三个选项（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.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！”上 框（只需触摸该框的边缘）并查看目标元素的变化。现在将元素放在“公差配合！”上 目标，可拖动元素必须与目标元素完全重叠，即“公差配合！” 目标。

选择要删除的元素

下面的例子演示了JqueryUI的拖拽功能中option Accept和scope option的使用。

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

您可以注意到，拖动或悬停（在目标上方）“将我拖到我的目标”元素时，会更改目标元素“拖放到此处”的颜色。

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

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

句法

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

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

先生。 动作与描述
1 破坏

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

Action - destroy

This action destroys the droppable functionality of an element completely. The elements return to their pre-init state.

Syntax

$( ".selector" ).droppable("destroy");
2 禁用

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

Action - disable

This action disables the droppable operation. The elements are no longer droppable elements. This method does not accept any arguments.

Syntax

$( ".selector" ).droppable("disable");
3 使能够

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

Action - enable

This action reactivate the droppable operation. The elements can again receive a droppable element. This method does not accept any arguments.

Syntax

$( ".selector" ).droppable("enable");
4 选项

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

Action - option

This action gets an object containing key/value pairs representing the current droppable options hash. This method does not accept any arguments.

Syntax

var options = $( ".selector" ).droppable( "option" );
5 选项（选项名称）

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

Action - option( optionName )

This action gets the value of currently associated droppable element with the specified optionName. This takes a String value as argument.

Syntax

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6 选项（选项名称，值）

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

Action - option( optionName, value )

This action sets the value of the droppable option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
7 选项（选项）

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

Action - option( options )

This action is sets one or more options for the droppable. The argument options is a map of option-value pairs to be set.

Syntax

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

此操作返回一个包含可放置元素的 jQuery 对象。此方法不接受任何参数。

This action returns a jQuery object containing the droppable element. This method does not accept any arguments.

Syntax

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（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 激活（事件，用户界面）

当接受的可拖动元素开始拖动时，会触发此事件。如果您想让可放置的物体在可以放置时“亮起”，这会很有用。

Event - activate(event, ui)

This event is triggered when the accepted draggable element starts dragging. This can be useful if you want to make the droppable "light up" when it can be dropped on. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • draggable − A jQuery object representing the draggable element.

  • helper − A jQuery object representing the helper that is being dragged.

  • position − Current CSS position of the draggable helper as { top, left } object.

  • offset − Current offset position of the draggable helper as { top, left } object.

Syntax

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 创建（事件，用户界面）

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

Event - create(event, ui)

This event is triggered when a droppable element is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
3 停用（事件，用户界面）

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

Event - deactivate(event, ui)

This event is triggered when an accepted draggable stops dragging. Where event is of type Event, and ui is of type Object and possible types are −

  • draggable − A jQuery object representing the draggable element.

  • helper − A jQuery object representing the helper that is being dragged.

  • position − Current CSS position of the draggable helper as { top, left } object.

  • offset − Current offset position of the draggable helper as { top, left } object.

Syntax

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 删除（事件，用户界面）

当元素被放置在可放置对象上时，会触发此操作。这是基于公差选项。其中event的类型为Event，而ui的类型为 Object。

Event - drop(event, ui)

This action is triggered when an element is dropped on the droppable. This is based on the tolerance option. Where event is of type Event, and ui is of type Object and possible types are −

  • draggable − A jQuery object representing the draggable element.

  • helper − A jQuery object representing the helper that is being dragged.

  • position − Current CSS position of the draggable helper as { top, left } object.

  • offset − Current offset position of the draggable helper as { top, left } object.

Syntax

$(".selector").droppable(
   drop: function(event, ui) {}
);
5 输出（事件，用户界面）

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

Event - out(event, ui)

Thi event is triggered when an accepted draggable element is dragged out of the droppable. This is based on the tolerance option. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").droppable(
   out: function(event, ui) {}
);
6 结束（事件，用户界面）

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

Event - over(event, ui)

This event is triggered when an accepted draggable element is dragged over the droppable. This is based on the tolerance option. Where event is of type Event, and ui is of type Object.and possible types are −

  • draggable − A jQuery object representing the draggable element.

  • helper − A jQuery object representing the helper that is being dragged.

  • position − Current CSS position of the draggable helper as { top, left } object.

  • offset − Current offset position of the draggable helper as { top, left } object.

Syntax

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

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