jQueryUI droppable：遍历回调触发顺序混乱

Question

更新

js小提琴（更新）在这里

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

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

S

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');
    }
});

Answer 1

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

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

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

1. 在第一次结束事件（变量为空）时保存当前元素。
2. 在变量不是当前元素的下一个 over 事件中，处理旧元素的 out 事件并将变量设置为当前悬停的元素。
3. 在 out 事件上处理 out 并将元素设置为 null。

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

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