jQuery 可拖动的恢复和停止事件

Question

第一个问题，请善待:)

我要做的是在用户释放可拖动对象时以及在还原动画完成之前调用一个函数。

据我所知，停止事件仅在还原完成时才被调用。我尝试将一个函数传递给可拖动的还原选项，但它似乎不起作用。这是我要演示的一些代码；

$("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");
    }
});

如果我取消注释恢复功能的第一行 - 淡出 - 那么元素会淡出但不会恢复。控制台仅在还原动画完成时记录“fin”。

谁能帮助我？不用说，我已经在 Google 上搜索了很多答案，但没有运气。

克星

Answer 1

首先，根据this blog，未记录的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;
    }
}

这允许可拖动助手在恢复时淡出。

您可以测试该解决方案here。