jquery - 整页叠加拖放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

在隐藏上添加超时有助于防止闪烁！

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/

Answer 3

感谢 Nikolaj，我得到了正确的答案：

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

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

将超时设置为 300，离开浏览器窗口时保持延迟，设置为 0 时：延迟和问题消失了。

我还使用了窗口上的绑定，因为在 Firefox 中，.overlay 类上的绑定似乎并非每次都有效。

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

“这是 Fiddle 中的完整工作示例”