将文件从桌面拖动到浏览器时在“dragenter”上显示覆盖

Question

我正在尝试实现与 imgur.com 相同的效果（将文件从桌面拖到 imgur.com，您将看到一个很酷的叠加层）。感谢这篇文章，已经有了一个可行的解决方案：事件传播、覆盖和拖放事件

但是：我发现这个解决方案相当不令人满意。 问题是当鼠标悬停在子元素上时 $(document).on('dragenter') 会被多次触发。我正在寻找一个事件，当我进入视口时触发一次，当我离开视口时触发一次，这样我就可以在dragenter和dragleave上有一个干净的$overlay.fadeIn()和.fadeOut()。

我用填充整个视口的透明元素解决了这个问题。然后我在该透明元素上而不是 $(document) 上调用 Dragenter。然后用 $('*:visible').live('dragenter') 显示隐藏的和真实的叠加层。 $('#transparentOverlay').on('dragleave') 隐藏叠加层。相当老套，但它有效（至少在 safari/chrome/firefox 中）

但只是选择器 $('*:visible').live() 让我头疼......

大家有更好的建议吗？

Answer 1

像这样尝试一下，这对我来说效果很好。本质上，它模仿

dragenter

和

dragleave

事件，但仅使用

dragover

:

;(function() {
    var isOver = false, interval;

    $(document).on('dragover', function(e) {
        e.preventDefault();

        clearInterval(interval);

        interval = setInterval(function() {
            isOver = false;
            clearInterval(interval);

            /*** callback for onDragLeave ***/
        }, 100);

        if (!isOver) {
            isOver = true;

            /*** callback for onDragEnter ***/
        }
    });
})();

Answer 2

上述答案的更轻量级版本：

;(function() {
    var dragTimeout;

    $(document).on('dragenter', function(e) {
        // dragenter code
    });

    $(document).on('dragleave', function(e) {
        dragTimeout = setTimeout(function() {
            dragTimeout = undefined;
            // your dragleave code
        });
    });

    $(document).on('dragover', function(e) {
        if (dragTimeout) {
            clearTimeout(dragTimeout);
            dragTimeout = undefined;
        }
    });
})();

Answer 3

可能需要查看您遇到的更多代码/错误。您是否尝试过使用简单的布尔值来检查事件何时触发并限制后续事件？

var dragging = false;

$(document).on('dragenter', function(){
    if(!dragging){
        //DO SOMETHING
        dragging = true;
    }
});

$(document).on('dragleave', function(){
    if(dragging){
        //DO SOMETHING
        dragging = false;
    }
});