需要加载element
模块,可通过下列方式加载
默认功能
在任意的 DOM 元素上启用 droppable 功能,并为可拖拽小部件创建目标。
请把我拖拽到目标处!
请放置在这里!
接受
使用 accept
选项指定目标 droppable
接受哪一个元素(或元素组)。
我可以拖动,但是不能放置
把我拖拽到目标处!
防止传播
当使用嵌套的 droppable
时 — 例如,您可以有一个树形的可编辑的目录结构,带有文件夹和文档节点 — greedy 选项设置为 true 来防止当 draggable
被放置在子节点(droppable
)上时的事件传播。
把我拖拽到目标处!
外部 droppable
外部 droppable
还原位置
当带有布尔值 revert 选项的 draggable 停止拖拽时,返回 draggable(或它的助手)到原始位置。
当被放置在目标上时还原
当未被放置在目标上时还原
相册
您可以通过将图像拖回图库或单击回收图标来“回收”图像。
选项
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
accept | Selector 或 Function() | 控制哪个可拖拽(draggable)元素可被 droppable 接受。
支持多个类型:
代码实例: 初始化带有指定 在初始化后,获取或设置 |
"*" |
activeClass | String | 如果指定了该选项,当一个可接受的 draggable 被拖拽时,class 将被添加到 droppable。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
addClasses | Boolean | 如果设置为 false ,将防止 ui-droppable class 被添加。这在数百个元素上调用 .droppable() 时有助于性能优化。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
true |
disabled | Boolean | 如果设置为 true ,则禁用该 droppable。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
greedy | Boolean | 默认情况下,当一个元素被放置在嵌套是 droppable 上时,每个 droppable 将接收该元素。然而,通过设置该选项为 true ,任何父元素的 droppable 将无法接收该元素。 drop 事件仍将照常,但会检查 event.target 以便查看哪个 droppable 接收 draggable 元素。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
hoverClass | String | 如果指定了该选项,当一个可接受 draggable 被覆盖在 droppable 上时,class 将被添加到 droppable。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
scope | String | 用于组合配套 draggable 和 droppable 项,除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
"default" |
tolerance | String | 指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值:
代码实例: 初始化带有指定 在初始化后,获取或设置 |
"intersect" |
方法
方法 | 返回 | 描述 |
---|---|---|
destroy() | jQuery (plugin only) | 完全移除 droppable 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: |
disable() | jQuery (plugin only) | 禁用 droppable。
代码实例: 调用 disable 方法: |
enable() | jQuery (plugin only) | 启用 droppable。
代码实例: 调用 enable 方法: |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 droppable 选项哈希。
代码实例: 调用该方法: |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 droppable 选项的值。
代码实例: 调用该方法: |
option( options ) | jQuery (plugin only) | 为 droppable 设置一个或多个选项。
代码实例: 调用该方法: |
widget() | jQuery | 返回一个包含 droppable 元素的 jQuery 对象。
代码实例: 调用 widget 方法: |
事件
事件 | 类型 | 描述 |
---|---|---|
activate( event, ui ) | dropactivate | 当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮",该选项就可以派上用场。
代码实例: 初始化带有指定 activate 回调的 droppable: 绑定一个事件监听器到 dropactivate 事件: |
create( event, ui ) | dropcreate | 当 droppable 被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的 droppable: 绑定一个事件监听器到 dropcreate 事件: |
deactivate( event, ui ) | dropdeactivate | 当一个可接受的 draggable 停止拖拽时触发。
代码实例: 初始化带有指定 deactivate 回调的 droppable: 绑定一个事件监听器到 dropdeactivate 事件: |
drop( event, ui ) | drop | 当一个可接受的 draggable 被放置在 droppable(基于 tolerance 选项)上时触发。
代码实例: 初始化带有指定 drop 回调的 droppable: 绑定一个事件监听器到 drop 事件: |
out( event, ui ) | dropout | 当 droppable 被拖拽出 droppable(基于 tolerance 选项)时触发。
注意: 代码实例: 初始化带有指定 out 回调的 droppable: 绑定一个事件监听器到 dropout 事件: |
over( event, ui ) | dropover | 当一个可接受的 draggable 被拖拽在 droppable(基于 tolerance 选项)上时触发。
代码实例: 初始化带有指定 over 回调的 droppable: 绑定一个事件监听器到 dropover 事件: |