jQuery UI API - 可放置小部件(Droppable Widget)
所属类别
用法
描述:为可拖拽小部件创建目标。
版本新增:1.0
依赖:
注释:jQuery UI 可放置(Droppable)插件让被选元素可放置(意味着它们在拖拽后接受被放置)。您可以逐个指定哪一个 draggable 会接受。
快速导航
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
accept | Selector 或 Function() | 控制哪个可拖拽(draggable)元素可被 droppable 接受。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).droppable({ accept: ".special" }); 在初始化后,获取或设置 // getter var accept = $( ".selector" ).droppable( "option", "accept" ); // setter $( ".selector" ).droppable( "option", "accept", ".special" ); |
"*" |
activeClass | String | 如果指定了该选项,当一个可接受的 draggable 被拖拽时,class 将被添加到 droppable。 代码实例: 初始化带有指定 $( ".selector" ).droppable({ activeClass: "ui-state-highlight" }); 在初始化后,获取或设置 // getter var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); // setter $( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" ); |
false |
addClasses | Boolean | 如果设置为 false ,将防止 ui-droppable class 被添加。这在数百个元素上调用 .droppable() 时有助于性能优化。代码实例: 初始化带有指定 $( ".selector" ).droppable({ addClasses: false }); 在初始化后,获取或设置 // getter var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); // setter $( ".selector" ).droppable( "option", "addClasses", false ); |
true |
disabled | Boolean | 如果设置为 true ,则禁用该 droppable。代码实例: 初始化带有指定 $( ".selector" ).droppable({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).droppable( "option", "disabled" ); // setter $( ".selector" ).droppable( "option", "disabled", true ); |
false |
greedy | Boolean | 默认情况下,当一个元素被放置在嵌套是 droppable 上时,每个 droppable 将接收该元素。然而,通过设置该选项为 true ,任何父元素的 droppable 将无法接收该元素。 drop 事件仍将照常,但会检查 event.target 以便查看哪个 droppable 接收 draggable 元素。代码实例: 初始化带有指定 $( ".selector" ).droppable({ greedy: true }); 在初始化后,获取或设置 // getter var greedy = $( ".selector" ).droppable( "option", "greedy" ); // setter $( ".selector" ).droppable( "option", "greedy", true ); |
false |
hoverClass | String | 如果指定了该选项,当一个可接受 draggable 被覆盖在 droppable 上时,class 将被添加到 droppable。 代码实例: 初始化带有指定 $( ".selector" ).droppable({ hoverClass: "drop-hover" }); 在初始化后,获取或设置 // getter var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); // setter $( ".selector" ).droppable( "option", "hoverClass", "drop-hover" ); |
false |
scope | String | 用于组合配套 draggable 和 droppable 项,除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。代码实例: 初始化带有指定 $( ".selector" ).droppable({ scope: "tasks" }); 在初始化后,获取或设置 // getter var scope = $( ".selector" ).droppable( "option", "scope" ); // setter $( ".selector" ).droppable( "option", "scope", "tasks" ); |
"default" |
tolerance | String | 指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值:
代码实例: 初始化带有指定 $( ".selector" ).droppable({ tolerance: "fit" }); 在初始化后,获取或设置 // getter var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); // setter $( ".selector" ).droppable( "option", "tolerance", "fit" ); |
"intersect" |
方法 | 返回 | 描述 |
---|---|---|
destroy() | jQuery (plugin only) | 完全移除 droppable 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: $( ".selector" ).droppable( "destroy" ); |
disable() | jQuery (plugin only) | 禁用 droppable。
代码实例: 调用 disable 方法: $( ".selector" ).droppable( "disable" ); |
enable() | jQuery (plugin only) | 启用 droppable。
代码实例: 调用 enable 方法: $( ".selector" ).droppable( "enable" ); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).droppable( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 droppable 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).droppable( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 droppable 选项的值。
代码实例: 调用该方法: $( ".selector" ).droppable( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 droppable 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).droppable( "option", { disabled: true } ); |
widget() | jQuery | 返回一个包含 droppable 元素的 jQuery 对象。
代码实例: 调用 widget 方法: var widget = $( ".selector" ).droppable( "widget" ); |
事件 | 类型 | 描述 |
---|---|---|
activate( event, ui ) | dropactivate | 当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮",该选项就可以派上用场。
代码实例: 初始化带有指定 activate 回调的 droppable: $( ".selector" ).droppable({ activate: function( event, ui ) {} }); 绑定一个事件监听器到 dropactivate 事件: $( ".selector" ).on( "dropactivate", function( event, ui ) {} ); |
create( event, ui ) | dropcreate | 当 droppable 被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的 droppable: $( ".selector" ).droppable({ create: function( event, ui ) {} }); 绑定一个事件监听器到 dropcreate 事件: $( ".selector" ).on( "dropcreate", function( event, ui ) {} ); |
deactivate( event, ui ) | dropdeactivate | 当一个可接受的 draggable 停止拖拽时触发。
代码实例: 初始化带有指定 deactivate 回调的 droppable: $( ".selector" ).droppable({ deactivate: function( event, ui ) {} }); 绑定一个事件监听器到 dropdeactivate 事件: $( ".selector" ).on( "dropdeactivate", function( event, ui ) {} ); |
drop( event, ui ) | drop | 当一个可接受的 draggable 被放置在 droppable(基于 tolerance 选项)上时触发。
代码实例: 初始化带有指定 drop 回调的 droppable: $( ".selector" ).droppable({ drop: function( event, ui ) {} }); 绑定一个事件监听器到 drop 事件: $( ".selector" ).on( "drop", function( event, ui ) {} ); |
out( event, ui ) | dropout | 当 droppable 被拖拽出 droppable(基于 tolerance 选项)时触发。
注意: 代码实例: 初始化带有指定 out 回调的 droppable: $( ".selector" ).droppable({ out: function( event, ui ) {} }); 绑定一个事件监听器到 dropout 事件: $( ".selector" ).on( "dropout", function( event, ui ) {} ); |
over( event, ui ) | dropover | 当一个可接受的 draggable 被拖拽在 droppable(基于 tolerance 选项)上时触发。
代码实例: 初始化带有指定 over 回调的 droppable: $( ".selector" ).droppable({ over: function( event, ui ) {} }); 绑定一个事件监听器到 dropover 事件: $( ".selector" ).on( "dropover", function( event, ui ) {} ); |
实例
一对 draggable 和 droppable 元素。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>可放置小部件(Droppable Widget)演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 125px; background: #999; color: #fff; padding: 10px; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="droppable">请放置到这里!</div> <div id="draggable">请拖拽我!</div> <script> $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function() { alert( "dropped" ); } }); </script> </body> </html>其他扩展