📅 最后修改于: 2020-11-27 01:48:15 🧑 作者: Mango
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()方法。
jQuery UI Droppable - Default functionality
b)如何使用addClass，disabled和tolerance：
以下示例指定了如何在jQuery UI的drop函数中使用这三个选项addClass，disable和tolerance。
jQuery UI Droppable - Default functionality
c)如何选择要删除的元素：
以下示例指定如何在jQuery UI的拖动函数中使用accept和scope选项：
jQuery UI Droppable - Default functionality
d)如何使用activeClass和hoverClass：
jQuery UI的activeClass和hoverClass选项用于管理外观。让我们以一个例子来演示这种效果：
jQuery UI Droppable - Default functionality
可放置(“动作”，参数)方法用于对可放置元素执行操作，例如防止可放置功能。您必须在第一个参数中传递指定为字符串的操作。即“禁用”以防止掉落。
句法：
$(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”. |
让我们以一个示例来演示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. |
让我们以一个示例来演示拖放功能期间的“ drop”，“ over”和“ out”事件。
jQuery UI Droppable - Default functionality