jQuery UI 可拖动 - 如果发生有效放置，则删除克隆答案

【问题标题】：jQuery UI draggable - remove clone if a valid drop occurredjQuery UI 可拖动 - 如果发生有效放置，则删除克隆
【发布时间】：2011-08-22 18:13:43
【问题描述】：

我正在尝试使以下内容起作用，但找不到为此使用停止事件的正确方法。

我有两列可以从右向左拖动。如果放置无效，我的恢复功能可以正常工作，但如果左列发生有效下降，我想删除右列中的项目。我知道条件不正确，但我不确定要查找什么标志来确定丢弃是否有效。

$("#sortable2 li").draggable({
        connectToSortable: "#sortable1",
        helper: "clone",
        revert: "invalid",
        stop: function (event, ui) {
            if (drop == "valid") 
            { 
               $(this).remove(); 
            }
        }
    });

【问题讨论】：

标签： jquery jquery-ui draggable droppable

【解决方案1】：

您可以使用.sortable 上的receive 事件处理删除原始元素

example jsfiddle

$("#sortable1").sortable({
    receive: function (event, ui) { // add this handler
        ui.item.remove(); // remove original item
    }
});

$("#sortable2 li").draggable({
    connectToSortable: "#sortable1",
    helper: "clone",
    revert: "invalid"
});

【讨论】：

这正是我所缺少的。谢谢！
我修改了上面的例子，使第一个列表中的元素可以移动到第二个，从第二个到第一个。但是一旦元素被移动到另一个列表，它就不能移动回原来的列表。

【解决方案2】：

首先，您可以比较event-start 和event-stop 之间的差异。使用调试器闯入事件函数，就可以看出两者的区别了。

【讨论】：

【解决方案3】：

如果您没有对任何内容进行排序，并且希望在 drop 有效时删除原始项目，则可以删除 helper:"clone"。

$("#sortable2 li").draggable({
    revert: "invalid",
});

【讨论】：

使用默认的helper: "original" 有限制。例如你不能使用appendTo 选项。