jqueryui'；s贪婪的Dropable无法按预期工作

我有一个可拖放列表，可以放在可拖放中，当这种情况发生时，可拖放被克隆并转换为可拖放

这个新的可拖放设备是贪婪的，但是当它们收到一个可拖放设备时，两个拖放事件都会被触发（来自可拖放设备的拖放事件和来自可拖放区域的拖放事件）

我做错了什么？我只需要事件触发一次（从新的下拉列表）

这里有一个方法：将一个项目拖放到红色区域中，然后拖动另一个项目并将其拖放到已拖放的项目中。请参阅控制台日志

HTML

CSS

---

我认为dragables实际上变得贪婪了，但是

#main_dropable

事件仍然会被触发，因为：

当您将另一个

.item

元素置于另一个

.item

元素之上时，将触发将

.item

放入另一个

.item

中的预期操作

    $newItem.droppable({
            greedy: true,
            drop: function(event, ui)
            {
                console.log("drop item");
                ...

但是这个原始元素在代码中被进一步删除了

    $(this).fadeTo(100, 0, function()
       {
        var $originalItem = $("ul").find(".item[data-id=" + $(this).data("id") + "]");

        $originalItem.fadeTo(100, 1).data("active", false);

        $("#main_droppable").find(".item[data-id=" + $originalItem.data("id") + "]").remove();
        ...

您实际上是在用新项替换原始项，因此会触发

#main_dropable

事件

    $newItem.droppable({
            greedy: true,
            drop: function(event, ui)
            {
                console.log("drop item");
                ...

---

我不能说我知道如何在不改变预期行为的情况下修复无意的副作用，但希望您能更好地理解为什么

贪婪属性似乎不起作用。
嗯……它与特定的类有关

当我放下DragTable并克隆它时，
ui DragTable Draging
类保持不变。所以为了让它工作，我必须把它移除，然后一切都按预期工作

我改变这一行：

var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);

在这一点上：

var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true).removeClass("ui-draggable-dragging");

更新的提琴：
如果你做了重叠放置，那么物品不应该再移回可拖动的位置？@TarunLalwani为什么不应该？此外，关键是双下降事件我从未使用过可下降设备，所以我只是想了解问题，了解您希望看到的预期行为是什么？如果我正确理解您@Matias Canepa，你想让蓝色的拖拽物也成为拖拽物，这样你就可以在视觉上嵌套拖拽物了，对吧？@RobertUdah有点。。。可拖动的确实被转换为可拖放的。但他们并不贪婪，我希望他们如此
var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);

var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true).removeClass("ui-draggable-dragging");