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

У меня есть сортируемый список видео и перетаскиваемый набор видео. В основном я хочу убедиться, что видео, перетаскиваемые, не находятся в первых 5 минутах видео. Поскольку размеры видео меняются, я хочу проверить это на капли - добавьте время до этого, а если нет, то 5 минут вернутся и покажут ошибку.

Я попытался подключиться ко всем обратным вызовам для перетаскивания и сортировки (включая недокументированный обратный обратный вызов), чтобы выполнить мой тест, но, что бы я ни пытался, dom всегда меняет (и сортирует вызовы его обратный вызов)...

Есть ли у кого-нибудь предложения?

Ответ 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 в любом случае.