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

2019年8月4日 164次阅读

更新

js小提琴(更新)here

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

当我从右向左拖动时向左拖动但不能正常工作时,它对我有用.

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

最佳答案 最有可能发生这种情况的原因是鼠标不会沿着连续的路径行进,而是跳跃.慢慢移动时,每次跳一两个像素,所以你不会注意到它.当你疯狂地连枷时,你可以在民意调查之间跳过100多个像素.

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

如果您想要发生某些事情并依赖于这些事件的顺序,我建议您在处理过度事件之前检查您的过度处理程序是否采取了任何外出操作.基本上你这样做：

>在first over事件(变量为null)上保存当前元素.
>在下一个变量不是当前元素的over事件中,处理旧元素的out事件并将变量设置为当前悬停元素.
>在out事件上处理out并将元素设置为null.

这将为您提供强制的事件顺序,即使实际结束发生在前一个输出之前.

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

点赞