用jquery ui draggable 和 droppable实现以下功能：

Posted 2023-05-08

如图，三个层，main是大容器，handle和container都可以拖动。

将handle 拖到container中，松开鼠标，handle添加到container里面，并且位置相对鼠标位置不动，此时，再拖动container时，handle跟着container一起动。拖出container时，handle再重新添加到main里面。该如何实现？

参考技术A

基本实现你的要求, 引用的是在线的jquery

handle拖出container时用了一个div, 拖到这个div就可以把handle移出

并没有拖出的概念, 只能是把handle拖入到main中, 但是main包含了container, 所以即使是在container中拖动也是拖入到了main中, 所以使用了一个div, 只有拖入到此div中的时候才实现把handle移出

01 Jquery UI Draggable 拖动插件

一、实例

一个简单的 jQuery UI 可拖拽小部件（Draggable Widget）。

代码：

<div id="draggable">请拖拽我！</div>
 
<script>
   $( "#draggable" ).draggable();
</script>

查看演示

允许使用鼠标移动元素。

注释：让被选元素可被鼠标拖拽。如果您不只是拖拽，而是拖拽 & 放置，请查看 jQuery UI 可放置（Droppable）插件，为可拖拽元素提供了一个放置目标。

二、快速导航

1、选项

• addClasses:如果设置为 false，将阻止 ui-draggable class 被添加。当在数百个元素上调用 .draggable() 时，这么设置有利于性能优化。
• appendTo:当拖拽时，draggable 助手（helper）要追加到哪一个元素。
• axis:约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值："x", "y"。
• cancel：防止从指定的元素上开始拖拽。
• connectToSortable：允许 draggable 放置在指定的 sortable 上。如果使用了该选项，一个 draggable 可被放置在一个 sortable 列表上，然后成为列表的一部分。注意：helper 选项必须设置为 "clone"，以便更好地工作。
• containment：约束在指定元素或区域的边界内拖拽。
• cursor：拖拽操作期间的 CSS 光标。
• cursorAt：设置拖拽助手（helper）相对于鼠标光标的偏移。坐标可通过一个或两个键的组合成一个哈希给出：{ top, left, right, bottom }。
• delay：鼠标按下后直到拖拽开始为止的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。
• disabled：如果设置为 true，则禁用该 draggable
• distance：鼠标按下后拖拽开始前必须移动的距离，以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。
• grid：对齐拖拽助手（helper）到网格，每个 x 和 y 像素。数组形式必须是 [ x, y ]。
• handle：如果指定了该选项，则限制开始拖拽，除非鼠标在指定的元素上按下。只有可拖拽（draggable）元素的后代元素才允许被拖拽。
• helper：允许一个 helper 元素用于拖拽显示。
• iframeFix：防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件。在与 cursorAt 选项结合使用时，或鼠标光标未覆盖在助手（helper）上时，非常有用。
• opacity：当被拖拽时助手（helper）的不透明度。
• refreshPositions：如果设置为 true，在每次鼠标移动（mousemove）时都会计算所有可放置的位置。注意：这解决了高度动态的问题，但是明显降低了性能。
• revert：当拖拽停止时，元素是否还原到它的开始位置。
• revertDuration：还原（revert）动画的持续时间，以毫秒计。如果 revert 选项是 false 则忽略。
• scope：用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。
• scroll：如果设置为 true，当拖拽时容器会自动滚动。
• scrollSensitivity：要滚动的视区边缘起的距离，以像素计。距离是相对于指针的，不是相对于 draggable。如果 scroll 选项是 false 则忽略。
• scrollSpeed：当鼠标指针获取到在 scrollSensitivity 距离内时，窗体滚动的速度。如果 scroll 选项是 false 则忽略。
• snap：元素是否对齐到其他元素。
• snapMode：决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。可能的值："inner"、"outer"、"both"。
• snapTolerance：从要发生对齐的对齐元素边缘起的距离，以像素计。如果 snap 选项是 false 则忽略。
• stack:控制匹配选择器（selector）的元素集合的 z-index，总是在当前拖拽项的前面，在类似窗口管理器这样的事物中非常有用。
• zIndex：当被拖拽时，助手（helper）的 Z-index。

2、方法

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

3、事件

• create( event, ui ):当 draggable 被创建时触发。
• drag( event, ui ):在拖拽期间当鼠标移动时触发。
• start( event, ui )：当拖拽开始时触发。
• stop( event, ui ):当拖拽停止时触发。

4、事件参数：ui：类型：Object

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

事件代码实例：

初始化带有指定 create 回调的 draggable：

$( ".selector" ).draggable({
  create: function( event, ui ) {}
});

或者绑定一个事件监听器到 dragcreate 事件：

$( ".selector" ).on( "dragcreate", function( event, ui ) {} );