jQuery перетаскиваемое событие возврата и остановки - PullRequest
Новая
       9

jQuery перетаскиваемое событие возврата и остановки

7 голосов
/ 06 мая 2011

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

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

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

$("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» только после завершения анимации возврата.

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

Buster

1 Ответ

11 голосов
/ 06 мая 2011

Во-первых, согласно этому блогу , недокументированный обратный вызов revert принимает только один аргумент (объект сокета или логическое значение 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;
    }
}

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

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

...