JQuery UI Draggable - удалить клон, если произошло допустимое падение

Question

Я пытаюсь заставить что-то вроде следующего работать, но не могу найти правильный способ использовать событие stop для этого.

У меня есть две колонки, куда вы можете перетащить справа налево. У меня правильно работает функция возврата, если удаление было недействительным, но я хочу удалить элемент в правом столбце, если в левом столбце произошло допустимое удаление. Я знаю, что условие неверно, но я не уверен, какой флаг искать, чтобы определить, было ли сбрасывание допустимым.

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

Answer 1

вы можете обработать удаление исходного элемента, используя событие receive в .sortable

примере 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

Если вы ничего не сортируете и хотите, чтобы исходный элемент был удален, поскольку перетаскивание действительно, вы можете просто удалить helper:"clone".

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

Answer 3

Для начала вы можете сравнить различия между event-start и event-stop . Используйте отладчик, чтобы проникнуть в функцию Event, и вы увидите разницу между ними.