jQuery 可拖动的恢复和停止事件

Posted 2023-05-08

【中文标题】jQuery 可拖动的恢复和停止事件

【英文标题】：jQuery draggable revert and stop event

【发布时间】：2011-08-20 03:43:03

【问题描述】：

第一个问题，请善待:)

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

据我所知，停止事件仅在还原完成时才被调用。我尝试将一个函数传递给可拖动的还原选项，但它似乎不起作用。这是我要演示的一些代码；

$("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”。

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

克星

【参考方案1】：

首先，根据this blog，未记录的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;
    

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

您可以测试该解决方案here。

【讨论】：

谢谢，这很有帮助。我想知道为什么恢复回调仍然没有记录？事实上，我想知道为什么 jquery UI 文档与 jquery 核心相比一般如此差。再次感谢！

你在正确的轨道上，但调用 originalPosition 从字面上看不会返回任何内容，即使使用你的 jsfiddle 也是如此。不知道你在哪里找到这部分，因为调用 .animate(undefined) 基本上什么都不做。恢复动画实际上仍然是从回调函数中返回 true 的结果。所以基本上，您的代码所做的只是绕过动画的“排队”，允许它与您选择放入回调函数中的任何其他动画同时运行，然后返回 true。结论：删除这个 .animate($helper.originalPosition);

@Mike，你完全正确，$helper.originalPosition 在revert 事件期间确实是undefined。但是，删除对animate(undefined) 的调用会导致项目不会恢复并“原地”淡出。这里肯定有什么阴暗的东西......