jQuery draggable还原和停止事件

前端之家收集整理的这篇文章主要介绍了jQuery 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”.

谁能帮我?毋庸置疑,我已经谷歌搜索了很多答案,但没有运气.

巴斯特

解决方法

首先,根据 this blog,未记录的revert回调只接受一个参数(drop socket对象,如果drop被拒绝,则为boolean 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.

猜你在找的jQuery相关文章