Блог

Первый вопрос, так что будьте добры 🙂

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

Насколько я могу видеть, событие stop вызывается только тогда, когда возврат завершен. Я попытался передать функцию опции возврата перетаскиваемого, но, похоже, это не работает. Вот фрагмент моего кода для демонстрации;

 $("a").draggable({
    helper:function(){
        return $("<div/>",{id:"mydrag",text:"link"}).appendTo("body");
    },
    revert:function(evt,ui){
        // $("#mydrag").fadeOut("slow");
        return true;
    },
    stop:function(evt,ui){
        console.log("fin");
    }
});
  

Если я раскомментирую первую строку функции возврата — fadeout — тогда элемент исчезнет, но не вернется. Консоль регистрирует «fin» только после завершения анимации возврата.

Кто-нибудь может мне помочь? Излишне говорить, что я много гуглил в поисках ответа, но безуспешно.

Сбой

Во-первых, согласно этому блогу, недокументированный revert обратный вызов принимает только один аргумент (объект drop socket или логическое значение, false если удаление было отклонено).

Теперь проблема в том, что draggable используется animate() внутренне для изменения положения помощника. По-видимому, эта анимация попадает в очередь и запускается только после завершения вашего fadeOut эффекта.

Один из способов достичь желаемого — выполнить вызов animate() самому себе, вот так:

 revert: function(socketObj) {
    if (socketObj === false) {
        // Drop was rejected, revert the helper.
        var $helper = $("#mydrag");
        $helper.fadeOut("slow").animate($helper.originalPosition);
        return true;
    } else {
        // Drop was accepted, don't revert.
        return false;
    }
}
  

Это позволяет перетаскиваемому помощнику исчезать во время его возврата.

Вы можете протестировать это решение здесь.