为可拖拽小部件创建目标。
依赖：
注释：jQuery UI 可放置（Droppable）插件让被选元素可放置（意味着它们在拖拽后接受被放置）。您可以逐个指定哪一个 draggable 会接受。
快速导航
1、选项
- accept:控制哪个可拖拽（draggable）元素可被 droppable 接受。
- activeClass:如果指定了该选项，当一个可接受的 draggable 被拖拽时，class 将被添加到 droppable。
- addClasses：如果设置为
false，将防止ui-droppableclass 被添加。这在数百个元素上调用.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：
"fit"：draggable 完全重叠在 droppable 上。"intersect"：draggable 重叠在 droppable 上，两个方向上至少 50%。"pointer"：鼠标指针重叠在 droppable 上。"touch"：draggable 重叠在 droppable 上，任何数量皆可。
指定用于测试一个 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>