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

如果我取消注释恢复函数的第一行 - fadeout - 那么元素会淡出但不会恢复。当恢复动画完成时，控制台仅记录“fin”。

有人可以帮助我吗？不用说，我在谷歌上搜索了很多答案，但没有运气。

克星

Answer 1

首先根据this blog ，未记录的 revert 回调仅采用单个参数(drop 套接字对象，如果 drop 被拒绝，则为 bool 值 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 .