jQuery draggable revert和stop事件

Question

第一个问题,所以要善良:)

我想要做的是在用户释放draggable时,以及在还原动画完成之前调用函数.

据我所知,只有在还原完成后才会调用stop事件.我已经尝试将函数传递给draggable的revert选项,但它似乎不起作用.这是我的一些代码来展示;

$("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回调只接受一个参数(drop socket对象,false如果drop被拒绝,则为boolean ).

现在,问题是内部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;
    }
}

这允许可拖动的助手在被还原时淡出.

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