jQueryUI droppable：一遍又一遍的回调按顺序触发

Posted 2023-05-08

【中文标题】jQueryUI droppable：一遍又一遍的回调按顺序触发

【英文标题】：jQueryUI droppable : over and out callback firing out of sequence

【发布时间】：2013-02-27 15:08:48

【问题描述】：

更新

js 小提琴（更新）here

我想知道，拖动元素是否在任何列内？

当我拖动 Left to right 时它对我有用，但当我拖动 right to left 时它不起作用。

jS

var isOutside = true;

$('.drag').draggable(
    helper : 'clone',
    drag : function(e, ui)
        if(isOutside)    
           return;
        //here is my code;
    ,
);

$('.column').droppable(

    over : function()
        isOutside = false;
        $('p').text('dragging inside');
    ,
    out : function()
         isOutside = true;
         $('p').text('dragging outside');
    
);

【问题讨论】：

你知道你的“问题”中甚至没有问号，到底是什么问题？你想达到什么目的？所以他们不按顺序开火，但这有什么问题吗？我们无法修复浏览器，因此您必须通过告诉我们您想要实现的目标以及为什么您拥有的内容不适合您来解决该问题。请添加更多详细信息...（请参阅，此文本有几个问题:)）。

@d-Pixie，查看更新后的问题

【参考方案1】：

发生这种情况的原因很可能是鼠标没有沿着连续路径移动，而是跳跃。当你慢慢移动它时，你每次跳跃一两个像素，所以你不会注意到它。当你疯狂地挥舞它时，你可以在两次投票之间跳过 100 多个像素。

由于您的鼠标现在位于其他东西上，因此该事件首先触发是正常的，然后，当浏览器循环赶上时，也会检测到 out 事件。可以说，over 事件的“重要性”更高，因为它是回调（鼠标移动）而不是投票（我周围还有什么？）。

如果您希望某些事情发生并取决于这些事件的顺序，我建议您在处理 over 事件之前检查您的 over 处理程序是否已采取任何 out 操作。基本上你这样做：

在 first over 事件（变量为 null）时保存当前元素。 在变量不是当前元素的下一个 over 事件中，处理旧元素的 out 事件并将变量设置为当前悬停的元素。 在 out 事件上处理 out 并将元素设置为 null。

即使实际的over 发生在前面的输出之前，这也会给你一个强制的事件顺序。

您也可以使用out 事件仅跟踪鼠标是否离开所有拖放区并在那里进行一些重置。并使用over 事件来处理所有的拖放区拖动...