Question

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

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

它有效，有一个怪癖：只要可拖动的拖放器是.appendTo()，拖拽就会根据悬停事件之前的相对位置而不规则地移动。

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

如何防止A移动？

Answer 1

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

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

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

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

您可以通过将over回调更改为this fiddle来执行以下操作，但是通过利用jQueryUI api已经提供的内容，可以在没有任何自定义逻辑的情况下重写整个解决方案。< / p>

当A悬停在B上时，A附加到B和A的位置相对于其原始父母现在继续，

但是，如果你想要的是特别是可拖动的，可以在dropover事件期间添加到droppable。然后我们可以找出一个例子。如果您只想将内容放入容器中并且能够跟踪订单并保持所有内容在视觉上对齐，那么您应该使用sortable小部件。