Question

第一个问题，所以要善良：）

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

据我所见，只有在还原完成后才会调用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

首先，根据this blog，未记录的revert回调只接受一个参数（drop socket对象，如果丢弃被拒绝，则为布尔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 draggable revert和stop事件

1 个答案: