可排序附加到错误的目标

Question

我有一个可排序的元素，其子元素也是可排序的。

这是一个JSFiddle，展示了我到目前为止的所作所为。

在下面的小提琴或图片中，蓝色区域为#container，白色方框为.child，标有黑色边框的此类方框组为.parent。

#container和.parent是可排序的。

如果一个项目从一个.parent拖放到另一个.parent，我只是附加该项目（jQuery ui会自动执行此操作）。如果项目（.child）被放入#container我将其包装在.parent div中，以将其标记为新的父项。

现在，通过单击选择prod3，将其拖到prod5的左侧，直到占位符出现在prod5的左侧。尽可能地将prod3向下拖动，同时仍然将prod5的左侧占位符放下，然后放下它。

如果jQuery UI在prod5的.parent内检测到它，则预期结果应如下所示：

如果检测到#container中的下降，则预期结果应如下所示：

现在发生了什么（从控制台中的日志中可以看出）：即使占位符位于#container内，也会在.parent上触发接收事件。我可以忍受 - 但问题是，即使在receive上触发了#container事件，拖动的项目prod3也会附加到.parent，并且没有接收事件是在.parent！

上触发

因此，由于这种奇怪的行为，因为在#container上触发了接收事件，所以该项目被包裹在.parent div中，但它会附加到包含prod5的.parent 。因此，我在.parent div中得到.parent div，如下图所示，这不应该发生。

有人知道为什么会这样吗？或者有人可以提出更好的方法（可排序容器内的可排序项目）？

旁注：这是一个极端情况，您可能需要尝试几次才能重现这种情况。

更新的 根据这个smaller demo，这似乎是jquery ui的一个错误，我报告了here。临时解决方法是手动处理#container的接收事件中的情况，如此answer。欢迎任何更好的解决方案...

Answer 1

解决方案非常简单

您需要添加以下条件：

if (!ui.item.parent().hasClass('parent')){
     ui.item.wrap(parent).before(helper); 
}

我发现只有在父项目为.parent .ui-sortable的情况下才会出现额外的.parent div，如果它只有.ui-sortable类，则它会完全正常工作。所以只需添加这个条件，一切正常。

FIDDLE

Answer 2

好吧，似乎.parent认为.child仍未进入内部。 具有较大边框的测试显示，当指针位于边距之外且低于.parent时，预期的行为是父级应该折叠，#container应该接受.child。 只有在.child的一半宽度后将其向下拖动才会发生这种情况，如果将其向左拖动到上一个.child并返回正常位置，则会完全消失。

这就是#container收到丢弃事件的原因 - 它发生在容器中！

在你的JSFiddle的my version中，可以通过将.child移动到另一个.child然后向下移动到黑色边缘以下来重现该错误。请注意，即使孩子在外面，父母（黑匣子）也不会缩小。

使用更高版本的JQuery UI可以部分解决此问题。

使用JQuery 2.0.2 and JQuery UI 1.10.3，它已完全修复。 这很可能是一个错误。