如何检测进入和离开窗口的HTML5拖动事件,如Gmail?

前端之家收集整理的这篇文章主要介绍了如何检测进入和离开窗口的HTML5拖动事件,如Gmail?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一旦载入文件的光标进入浏览器窗口,就可以突出显示放置区域,就像Gmail一样。但我不能让它工作,我觉得我只是错过了一些非常明显的东西。

我一直在努力做这样的事情:

this.body = $('body').get(0)
this.body.addEventListener("dragenter",this.dragenter,true)
this.body.addEventListener("dragleave",this.dragleave,true)`

但是,当光标移动并移出BODY以外的元素时,它会触发事件,这是有道理的,但绝对不起作用。我可以把一个元素放在一切之上,覆盖整个窗口并检测出来,但这将是一个可怕的方法

我失踪了什么

解决方法

解决了一个超时(不是吱吱声干净,但工作):
var dropTarget = $('.dropTarget'),html = $('html'),showDrag = false,timeout = -1;

html.bind('dragenter',function () {
    dropTarget.addClass('dragging');
    showDrag = true; 
});
html.bind('dragover',function(){
    showDrag = true; 
});
html.bind('dragleave',function (e) {
    showDrag = false; 
    clearTimeout( timeout );
    timeout = setTimeout( function(){
        if( !showDrag ){ dropTarget.removeClass('dragging'); }
    },200 );
});

我的例子使用jQuery,但并不是必需的。以下是发生了什么的总结:

>在html(或body)元素的拖放和拖动上设置一个标志(showDrag)为true。
>拖拽将标志设置为false。然后设置一个短暂的超时时间来检查该标志是否仍然为false。
>理想情况下,在设置下一个之前,请先跟踪超时并清除。

这样,每个拖拽事件都给DOM足够的时间来重新设置一个新的拖动事件来重置标志。我们关心的真正的最后拖车将会看到旗帜仍然是假的。

原文链接:https://www.f2er.com/html5/168907.html

猜你在找的HTML5相关文章