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”。

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

巴斯特

Answer 1

首先，根据此博客，未记录的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;
    }
}

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

您可以在此处测试该解决方案。