📜  jQuery UI Droppable

📅  最后修改于: 2020-11-27 01:48:15             🧑  作者: Mango

jQuery UI Droppable

jQuery UI方便您使用droppable()方法使任何DOM元素可拖放到指定目标。

句法:

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

1.    $(selector, context).droppable (options) Method
2.    $(selector, context).droppable ("action", params) Method 

第一种方法

droppable(options)方法指定您可以将HTML元素用作可以放置其他元素的元素。在这里,option参数指定了所涉及元素的行为。

句法:

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

您可以使用JavaScript对象一次使用一个或多个选项。如果您使用多个选项,则必须使用逗号将它们分开。例如:

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

以下是可与该方法一起使用的不同选项的列表:

Option Description
accept This option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
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.
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.
diasabled This option when set to true disables the droppable. by default its value is false.
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.
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.
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”.
tolerence This option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. By default its value is “intersect”.

jQuery UI Droppable()方法示例1

让我们以一个示例来演示不带参数的jQuery UI Droppable()方法。



   
      
      jQuery UI Droppable - Default functionality
      
      
      
      
      
   
   
      

I am SSSIT.org
Drag me to JavaTpoint

Welcome to JavaTpoint

jQuery UI Droppable()方法示例2

b)如何使用addClass,disabled和tolerance:

以下示例指定了如何在jQuery UI的drop函数中使用这三个选项addClass,disable和tolerance。



   
      
      jQuery UI Droppable - Default functionality
      
      
      
      
      


   

Drag me to my target

Drop here

I'm disabled, you can't drop here!

Tolerance Touch!
Drop to touch the boundary.

Tolerance Fit!
Drop within the box.

jQuery UI Droppable()方法示例3

c)如何选择要删除的元素:

以下示例指定如何在jQuery UI的拖动函数中使用accept和scope选项:



   
      
      jQuery UI Droppable - Default functionality
      
      
      
      
   


   

Students who want to learn SQL

Students who want to learn HTML

SQL

HTML


Students who want to learn Java

Students who want to learn Spring

Java

Spring

jQuery UI Droppable()方法示例4

d)如何使用activeClass和hoverClass:

jQuery UI的activeClass和hoverClass选项用于管理外观。让我们以一个例子来演示这种效果:



   
      
      jQuery UI Droppable - Default functionality
      
      
      
      
   


 

Drag me to my target

Hover at me or Drop here

第二种方法

可放置(“动作”,参数)方法用于对可放置元素执行操作,例如防止可放置功能。您必须在第一个参数中传递指定为字符串的操作。即“禁用”以防止掉落。

句法:

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

以下是可用于此方法的操作列表:

Action Description
accept This option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
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.
addclasses This option will prevent the ui-droppable class from being added to the droppable elements,when set to false.by default its value is true.
disabled This option disables the droppable,when set to true. by default its value is false.
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.
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.
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”.
tolerence This option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. by default its value is “intersect”.

jQuery UI Droppable()方法示例5

让我们以一个示例来演示destroy()方法的用法:



   
      
      jQuery UI Droppable - Default functionality
      
      
      
      
      
   
   
      

drag 1

drag 2

drag 3

drop here
drop here
drop here

jQueryUI中有一些事件方法会针对特定事件触发。以下是一些事件方法。

Event Method Description
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.
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.
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.
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.
out(event,ui) This 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.
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.

jQuery UI Droppable()方法示例6

让我们以一个示例来演示拖放功能期间的“ drop”,“ over”和“ out”事件。



   
      
      jQuery UI Droppable - Default functionality
      
      
      
      
      
   
   

Drag me to my target

I am the target.