防止在 jQuery droppable {over} 上重新定位

Question

这是一个小提琴：click me（你需要刷新才能让它再次出错，这只是一个简单的演示）

我希望能够嵌套一些拖放元素。我进行了设置，以便当拖动的项目悬停在可放置项目上时，它是 .appendTo()'d 可放置项目。但这只是为了 DOM 语义。我还希望能够将这些项目定位在“画布”（我们将称之为）上，以保持它们被拖动的位置。

它的工作原理有一个怪癖：每当可拖动对象是 .appendTo() 可放置对象时，可拖动对象会根据悬停事件之前的相对位置不规则地移动。

例如，假设 A 被拖动到 B 内部。当 A 悬停在 B 上时，A 被附加到 B 并且 A 相对于其原始父级的位置现在继承，所以由于 B 是它的新父级，A 立即移动到它在其原始父级中时所处的相对位置。

我怎样才能让 A 不动？

Answer 1

首先，both 你的 div 变得可拖动和可放置。你确定这是你想要的吗？

$('div').draggable(); 
$('div').droppable({});

over 事件处理程序用于当元素悬停 在可放置对象上时。为什么不使用drop 事件处理程序来完成这项工作？

    over: function (event, ui) {
        ui.draggable.appendTo($(this));
    }

您可以通过将您的 over 回调更改为类似于 this fiddle 来执行以下操作，但随后可以再次使用 jQueryUI api 提供的内容，在没有任何自定义逻辑的情况下重写整个解决方案。

当 A 悬停在 B 上时，A 被附加到 B 和 A 的位置 已经相对于其原始父级现在结转，

但是，如果您想要的是一个可以在 dropover 事件期间添加到 droppable 的可拖动对象。然后我们可以举一个例子。如果您只想将东西放入容器中并能够跟踪订单 + 让所有内容在视觉上对齐，那么您应该改用 sortable 小部件。