问可排序附加到错误目标

EN

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

这里有一个JSFiddle，演示了到目前为止我得到了什么。

在下面的小提琴或图片中，蓝色区域是#container，白色框是.child，其中一组带有黑色边框的是.parent。

#container和.parent是可排序的。

​

​

如果一个项目从一个.parent拖放到另一个.parent中，我只需追加该项(jQuery ui自动完成此操作)。如果一个项目(.child)被放置到#container中，我将其包装在.parent div中，以将其标记为新的父级。

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

如果jQuery UI检测到它是.parent of prod5中的一个下降，那么预期的结果应该如下所示：

​

​

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

​

​

现在正在发生的事情(从控制台中的日志中可以看出)：在#container上触发一个接收事件，即使占位符在.parent中。我可以接受这一点--但问题是，即使receive事件是在#container上触发的，拖动的项prod3被附加到.parent，并且.parent上没有触发任何接收事件！

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

​

​

有人知道为什么会发生这种事吗？或者有人能建议一种更好的方法(可排序容器中的可排序项)？

附带注意:这是一个角落情况，您可能需要尝试几次才能重现这个场景。

更新:根据这个小型演示，这似乎是jquery的一个bug，我报告了这里。一个临时的解决办法是手动处理#container的接收事件中的情况，就像在这个回答中一样。