描述：为可拖拽小部件创建目标。
版本新增：1.0
依赖：
注释：jQuery UI 可放置（Droppable）插件让被选元素可放置（意味着它们在拖拽后接受被放置）。您可以逐个指定哪一个 draggable 会接受。
| 选项 | 方法 | 事件 |
|---|---|---|
| 选项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| accept | Selector 或 Function() |
控制哪个可拖拽（draggable）元素可被 droppable 接受。 支持多个类型：
代码实例： 初始化带有指定accept选项的 droppable： $( ".selector" ).droppable({ accept: ".special" });
在初始化后，获取或设置accept选项： // getter var accept = $( ".selector" ).droppable( "option", "accept" ); // setter $( ".selector" ).droppable( "option", "accept", ".special" ); |
"*" |
| activeClass | String |
如果指定了该选项，当一个可接受的 draggable 被拖拽时，class 将被添加到 droppable。 代码实例： 初始化带有指定activeClass选项的 droppable： $( ".selector" ).droppable({ activeClass: "ui-state-highlight" });
在初始化后，获取或设置activeClass选项： // getter var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); // setter $( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" ); |
false |
| addClasses | Boolean |
如果设置为false，将防止ui-droppableclass 被添加。这在数百个元素上调用.droppable()时有助于性能优化。 代码实例： 初始化带有指定addClasses选项的 droppable： $( ".selector" ).droppable({ addClasses: false });
在初始化后，获取或设置addClasses选项： // getter var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); // setter $( ".selector" ).droppable( "option", "addClasses", false ); |
true |
| disabled | Boolean |
如果设置为true，则禁用该 droppable。 代码实例： 初始化带有指定disabled选项的 droppable： $( ".selector" ).droppable({ disabled: true });
在初始化后，获取或设置disabled选项： // 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 元素。 代码实例： 初始化带有指定greedy选项的 droppable： $( ".selector" ).droppable({ greedy: true });
在初始化后，获取或设置greedy选项： // getter var greedy = $( ".selector" ).droppable( "option", "greedy" ); // setter $( ".selector" ).droppable( "option", "greedy", true ); |
false |
| hoverClass | String |
如果指定了该选项，当一个可接受 draggable 被覆盖在 droppable 上时，class 将被添加到 droppable。 代码实例： 初始化带有指定hoverClass选项的 droppable： $( ".selector" ).droppable({ hoverClass: "drop-hover" });
在初始化后，获取或设置hoverClass选项： // 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 接受。 代码实例： 初始化带有指定scope选项的 droppable： $( ".selector" ).droppable({ scope: "tasks" });
在初始化后，获取或设置scope选项： // getter var scope = $( ".selector" ).droppable( "option", "scope" ); // setter $( ".selector" ).droppable( "option", "scope", "tasks" ); |
"default" |
| tolerance | String |
指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值：
代码实例： 初始化带有指定tolerance选项的 droppable： $( ".selector" ).droppable({ tolerance: "fit" });
在初始化后，获取或设置tolerance选项： // 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 被创建时触发。
注意：ui对象是空的，这里包含它是为了与其他事件保持一致性。 代码实例： 初始化带有指定 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选项）时触发。
注意：ui对象是空的，这里包含它是为了与其他事件保持一致性。 代码实例： 初始化带有指定 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>