整页叠加拖放jQuery

Question

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

浏览器兼容性:
- Chrome和Safari似乎都有这个问题
- 当你移动光标时,Firefox会出现这个问题:没问题. - IE9似乎工作

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

第一解决方案

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

关于jsFiddle的完整示例

二解决方案

我还尝试将'dragleave'事件设置为'.overlay'类,如下所示:

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

关于jsFiddle的完整示例

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

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

谢谢!

Answer 1

我在我的选择中遇到了一个更好的解决方案,不需要使用我不喜欢的超时.

如果将叠加层设置为具有CSS属性

pointer-events:none

它在显示时不会影响窗口上的拖动事件,您可以达到相同的效果

Answer 2

在Hide上添加超时有助于防止闪烁!

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

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

我编辑了你的小提琴http://jsfiddle.net/yApUZ/