如何检测进入和离开窗口的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足够的时间来重新设置一个新的拖动事件来重置标志。我们关心的真正的最后拖车将会看到旗帜仍然是假的。