Question

当有人进入带有文件的窗口时，我正在尝试添加整页覆盖。这是有效的，但是当我添加叠加层时，它会立即触发'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'事件。

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

谢谢！

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/

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);

"Here is the full working example in Fiddle"

整页叠加拖放jQuery

3 个答案: