jQuery Draggable + Sortable - Как отклонить падение в сортировке? - PullRequest
Новая
       29

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

11 голосов
/ 19 августа 2011

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

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

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

Ответы [ 2 ]

10 голосов
/ 19 августа 2011

Операцию перетаскивания можно отменить, вызвав метод cancel перетаскиваемого виджета (этот метод недокументирован, но его имя не начинается с подчеркивания, что, вероятно, делает его "безопаснее"использовать надежно).Однако он работает только во время события 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";
    }
}

Неизвестное исключение все равно появится в консоли.

3 голосов
/ 01 апреля 2014

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

.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.

...