将文件从桌面拖动到浏览器时,在"dragenter"上显示叠加层

Question

我试图达到与imgur.com相同的效果(将文件从桌面拖到imgur.com,你会看到很酷的叠加).由于这篇文章已经有了一个可行的解决方案:事件传播,叠加和拖放事件

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

我用一个填充整个视口的透明元素解决了它.我然后在透明元素而不是$(文档)上调用dragenter.使用$('*:visible').live('dragenter')然后我会显示隐藏的和真实的叠加层.$('#transparentOverlay').on('dragleave')隐藏叠加层.非常hacky但它​​的工作原理(至少在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

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

var dragging = false;

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

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