开发手册 欢迎您！
软件开发者资料库

JqueryUI - Droppable

jQueryUI的可弃 - 从基础开始，以先进的理念与实例包括概述简单，简单的步骤学习jQueryUI的，环境设置，交互，可拖动，可放开，可调整大小，可选择，可排序，窗口小部件，手风琴，自动完成，按钮，日期选择器，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

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

语法

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


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

Sr.No.选项&安培;描述
1accept
当您需要控制哪些可拖动元素可以被删除时，使用此选项.默认情况下，其值为 * .

选项 - 接受

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

这可以是 :

  • Function : 此类型表示接受哪些可拖动元素.

  • 功能 : 将为页面上的每个可拖动元素调用回调函数.如果droppable接受了可拖动元素，则此函数应返回 true .

语法 

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

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

选项 -  activeClass

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

语法 

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

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

选项 -  addClasses

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

语法 

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

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

选项 - 已停用

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

语法 

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

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

选项 - 贪婪

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

语法 

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

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

选项 -  hoverClass

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

语法 

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

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

选项 - 范围

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

语法 

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

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

选项 - 容差

此选项是 String ，它指定可拖动元素应如何覆盖正在接受的放置的droppable元素.默认情况下，其值为"相交".可能的值为 :

  • fit :  Draggable完全覆盖了droppable元素.

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

  • pointer : 鼠标指针与可放置元素重叠.

  • touch : 可拖动重叠可放置任何数量的触摸.

语法 

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

以下部分将向您展示一些丢弃功能的工作示例.

默认功能

以下示例演示了一个可放置功能的简单示例，没有参数 droppable()方法.

               jQuery UI Droppable - Default functionality                                                            
Drag me to my target
      
               

Drop here

      
   


让我们将上述代码保存在HTML文件 dropexample.htm 中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出.现在，您可以使用结果 :

使用addClass，禁用和容差

以下示例演示了三个选项的使用（a）addClass（b）禁用和（c）JqueryUI的drop函数中的容差。

               jQuery UI Droppable - Default functionality                                                            
Drag me to my target
                     
Drop here
                     
I'm disabled, you can't drop here!
                     
Tolerance Touch!
                     
Tolerance Fit!
         

让我们将上述代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在，你可以玩结果

现在将元素放在"Tolerance Touch"上！ 框（只需触摸此框的边缘）并查看目标元素的更改。 现在将元素放在"Tolerance Fit！"上 目标，可拖动元素必须与目标元素完全重叠，即"Tolerance Fit！" 目标。

选择要删除的元素

以下示例演示了在JqueryUI的drag函数中使用选项accept和scope选项。

               jQuery UI Droppable - Default functionality                                                                        
People to be dropped to Japan
                              
People to be dropped to India
                              
Japan
                              
India
                     
                                    
People who want to learn Java
                              
People who want to learn Spring
                              
Java
                              
Spring
                  

让我们将上述代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在你可以玩输出

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

管理外观

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

               jQuery UI Droppable - Default functionality                                       #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;         }                                          
Drag me to my target
                     
Drop here
         

让我们将上面的代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出

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


$ (selector, context).droppable ("action", params) 函数

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

语法

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

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

Sr.No.Action & Description
1destroy

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

Action - destroy

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

Syntax

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

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

Action - disable

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

Syntax

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

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

Action - enable

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

Syntax

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

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

Action - option

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

Syntax

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

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

Action - option( optionName )

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

Syntax

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

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

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

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

Syntax

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

示例

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

               jQuery UI Droppable - Default functionality                                                         
drag 1
      
drag 2
      
drag 3
            drop here      drop here      drop here   

让我们将上面的代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出

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

可放置元素的事件管理

除了我们在前面部分中看到的droppable（options）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下所列:

Sr.No.Event Method & Description
1activate(event, ui)

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

Event - activate(event, ui)

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

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

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

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

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

Syntax

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

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

Event - create(event, ui)

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

Syntax

$( ".selector" ).droppable({   create: function( event, ui ) {}});
3deactivate(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}对象。

Syntax

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

在droppable上放置元素时会触发此操作。 这基于容差选项。 其中event是Event类型，ui是Object类型。

Event - drop(event, ui)

在droppable上放置元素时会触发此操作。 这基于容差选项。 其中event是Event类型，ui是Object类型，可能的类型是:

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

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

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

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

Syntax

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

T当已接受的可拖动元素被拖出droppable时，将触发他的事件。 这基于容差选项。 其中event是Event类型，ui是Object类型。

Event - out(event, ui)

当已接受的可拖动元素被拖出droppable时，将触发他的事件。 这基于容差选项。 其中event是Event类型，ui是Object类型。

Syntax

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

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

Event - over(event, ui)

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

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

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

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

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

Syntax

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

示例

以下示例演示了删除功能期间的事件方法用法。 此示例演示了事件drop，over和out的使用。

               jQuery UI Droppable - Default functionality                                                                  
Drag me to my target
                     
Drop here
         

让我们将上面的代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出

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