整页叠加拖放jQuery

当有人进入带有文件的窗口时,我正在尝试添加整页覆盖.
这是有效的,但是当我添加叠加时,它会立即触发’dragleave’事件,因为叠加会阻止拖动.这导致闪烁效应.

浏览器兼容性
– Chrome和Safari似乎有这个问题
– 当你按住光标时,Firefox有这个问题,移动时没问题.
– IE9似乎工作@H_944_11@

我想和imgur.com一样.
如果将文件拖到其页面,则会显示叠加而不会闪烁等.@H_944_11@

第一解决方案@H_944_11@

$(window).bind('dragover',dragover);
$(window).bind('drop',drop);
$(window).bind('dragleave',dragleavE);

Full example on jsFiddle@H_944_11@

二解决方案@H_944_11@

我还尝试将’dragleave’事件设置为’.overlay’类,如下所示：@H_944_11@

$('.overlay').bind('dragleave',dragleavE);

Full example on jsFiddle@H_944_11@

但是如果你将鼠标悬停在div中的段落上,它也会发送一个’dragleave’事件.@H_944_11@

有人知道如何防止这种情况吗？
或者只有当你离开浏览器窗口时如何“拖拉”？@H_944_11@

谢谢！@H_944_11@

function dragover(event) {
    clearTimeout(tid);
    event.stopPropagation();
    event.preventDefault();
    $('.overlay').show();
}

function dragleave(event) {
    tid = setTimeout(function(){
        event.stopPropagation();
        $('.overlay').hide();
    },300);
}