当有人带着文件进入窗口时,我试图添加一个完整的页面覆盖。
这是可行的,但是当我添加叠加层时,它会立即触发'dragleave'事件,因为叠加层会阻止拖动。这会导致闪烁效果。

浏览器兼容性:
- Chrome 和 Safari 似乎有这个问题
- 当您保持光标静止时,Firefox 会出现此问题,移动时:没问题。
- IE9 似乎工作

我想和 imgur.com 一样。
如果你将一个文件拖到他们的页面上,它会显示一个没有闪烁等的叠加层。

第一个解决方案

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

Full example on jsFiddle

第二个解决方案

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

Full example on jsFiddle

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

有人知道如何防止这种情况吗?
或仅在离开浏览器窗口时如何“拖动”?

谢谢!

最佳答案

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

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

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

我编辑了你的 fiddle http://jsfiddle.net/yApUZ/

10-05 20:44
查看更多