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

Question

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

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

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

Answer 1

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

示例 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"
});

Answer 2

首先，您可以比较 event-start 和 事件停止。使用调试器进入事件函数，您可以看到两者之间的区别。

Answer 3

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

$("#sortable2 li").draggable({
    恢复：“无效”，
});