JQuery Draggable + Sortable - Как отклонить падение в сортировку?

Ответ 1

Вы можете вернуть операцию перетаскивания, вызвав метод cancel draggable виджет (этот метод недокументирован, но его имя не начинается с подчеркивания, что, возможно, делает его "безопаснее" надежно использовать). Он работает только во время события start, однако, поскольку другие события происходят слишком поздно, чтобы вызвать повторную анимацию.

Однако виджет sortable все равно будет регистрировать падение, даже если операция перетаскивания отменена, поэтому вам также необходимо удалить вновь добавленный элемент (во время события stop, поскольку событие start происходит слишком рано):

$("#yourSortable").sortable({
    start: function(event, ui) {
        if (!canDropThatVideo(ui.item)) {
            ui.sender.draggable("cancel");
        }
    },
    stop: function(event, ui) {
        if (!canDropThatVideo(ui.item)) {
            ui.item.remove();
            // Show an error...
        }
    }
});

Вы можете увидеть результаты в эту скрипту (четвертый элемент будет всегда возвращаться).

Обновление: Как справедливо отмечает Джон Курлак в комментариях, элемент не возвращается из-за вызова draggable("cancel"), а потому, что ui.sender есть null в нашем случае. Бросание чего-либо приводит к такому же поведению.

Увы, все остальные комбинации, которые я пробовал, приводят к возврату элемента без анимации, поэтому, возможно, лучше всего избегать доступа к ui.sender и вместо этого написать что-то вроде:

start: function(event, ui) {
    if (!canDropThatVideo(ui.item)) {
        throw "cancel";
    }
}

Непрерывное исключение все равно будет отображаться в консоли.

Ответ 2

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

.droppable({
    drop: function (event, ui) {

        var canDrop = false;

        //if you need more calculations for
        //validation, like me, put them here

        if (/*your validation here*/)
            canDrop = true;

        if (!canDrop) {
            ui.draggable.remove();
        }
        else{
            //you can put whatever else you need here
            //in case you needed the drop anyway
        }
    }
}).sortable({
    //your choice of sortable options
});

Я использовал это, потому что мне нужно событие drop в любом случае.