jQueryUI droppable：不按顺序触发和调出回调

Question

更新

js fiddle（已更新）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');
    }
});

Answer 1

这很可能发生的原因是鼠标不会沿着连续路径行进，而是会跳跃。慢慢移动时，每次跳一两个像素，所以你不会注意到它。当你疯狂地连枷时，你可以在民意调查之间跳过100个像素。

由于你的鼠标现在已经超过其他东西，因此首先触发事件是正常的，然后当浏览器循环赶上时，也会检测到out事件。可以说过度事件的“重要性”更高，因为它是一个回调（鼠标移动）而不是一个民意调查（我还有什么东西？）。

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

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

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

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