0

这是一个小提琴：点击我（您需要刷新以使其再次出现错误，这只是一个简单的演示）

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

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

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

我怎样才能让A不动？

4

1 回答 1

0

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

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

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

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

您可以通过将over回调更改为看起来像这样 fiddle来执行以下操作，但是通过利用 jQueryUI api 已经提供的内容，可以再次重写整个解决方案而无需任何自定义逻辑。

当 A 悬停在 B 上时，A 被附加到 B 并且 A 相对于其原始父级的位置现在继承，

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

于 2013-06-26T09:11:32.600 回答