jQuery UI （2）Droppable 放置插件

为可拖拽小部件创建目标。

依赖：

注释：jQuery UI 可放置（Droppable）插件让被选元素可放置（意味着它们在拖拽后接受被放置）。您可以逐个指定哪一个 draggable 会接受。

快速导航

1、选项

accept:控制哪个可拖拽（draggable）元素可被 droppable 接受。
activeClass:如果指定了该选项，当一个可接受的 draggable 被拖拽时，class 将被添加到 droppable。
addClasses：如果设置为 false，将防止 ui-droppable class 被添加。这在数百个元素上调用 .droppable() 时有助于性能优化。
disabled：如果设置为 true，则禁用该 droppable。
greedy：默认情况下，当一个元素被放置在嵌套是 droppable 上时，每个 droppable 将接收该元素。然而，通过设置该选项为 true，任何父元素的 droppable 将无法接收该元素。 drop 事件仍将照常，但会检查 event.target 以便查看哪个 droppable 接收 draggable 元素。
hoverClass：如果指定了该选项，当一个可接受 draggable 被覆盖在 droppable 上时，class 将被添加到 droppable。
scope：用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。
tolerance：

指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值：

"fit"：draggable 完全重叠在 droppable 上。
"intersect"：draggable 重叠在 droppable 上，两个方向上至少 50%。
"pointer"：鼠标指针重叠在 droppable 上。
"touch"：draggable 重叠在 droppable 上，任何数量皆可。

2、方法

destroy()：完全移除 droppable 功能。这会把元素返回到它的预初始化状态。
disable()：禁用 droppable。
enable()：启用 droppable。
option()：获取当前与指定的 optionName 关联的值。
widget()：返回一个包含 droppable 元素的 jQuery 对象。

3、事件

activate( event, ui )：当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮"，该选项就可以派上用场。
create( event, ui )：当 droppable 被创建时触发。
deactivate( event, ui )：当一个可接受的 draggable 停止拖拽时触发。
drop( event, ui )：当一个可接受的 draggable 被放置在 droppable（基于 tolerance 选项）上时触发。
out( event, ui )：当 droppable 被拖拽出 droppable（基于 tolerance 选项）时触发。
over( event, ui )：当一个可接受的 draggable 被拖拽在 droppable（基于 tolerance 选项）上时触发。

4、事件参数 ui

draggable：类型：jQuery
描述：jQuery 对象，表示 draggable 元素。
helper：类型：jQuery
描述：jQuery 对象，表示被拖拽的助手（helper）。
position：类型：Object
描述：draggable 助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
offset：类型：Object
描述：draggable 助手（helper）的当前偏移位置，比如 { top, left } 对象。

实例

一对 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>

查看演示