02 Jquery UI Droppable 放置插件

Posted 2021-01-02 工作在浏览器上人-YangBobin

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

一、实例

一对 draggable 和 droppable 元素。

 
<div id="droppable">请放置到这里！</div>
<div id="draggable">请拖拽我！</div>
 
<script>
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});
</script>
  

查看演示

注释：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 } 对象。