jQuery UI API - can be placed small parts (Droppable Widget)
category
usage
Description: To create the target can drag and drop widgets.
New Version: 1.0
rely:
Note: jQuery UI can be placed (Droppable) plugin enables selected elements can be placed (meaning they are placed after accepting the drag). You can individually specify which draggable will accept.
Quick navigation
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 ) {} ); |
Examples
One pair draggable and droppable element.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> can be placed small parts (Droppable Widget) Demo </ 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"> Keep out here! </ Div> <Div id = "draggable"> Please drag me! </ Div> <Script> $ ( "#draggable") .draggable (); $ ( "#droppable") .droppable ({ drop: function () { alert ( "dropped"); } }); </ Script> </ Body> </ Html>