当有人带着文件进入窗口时,我试图添加一个完整的页面覆盖。
这是可行的,但是当我添加叠加层时,它会立即触发'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/