Question

我试图获得与imgur.com相同的效果（将文件从桌面拖到imgur.com，你会看到很酷的叠加层）。已经有了一个有效的解决方案，感谢这篇文章：Event propagation, overlay and drag-and-drop events

但是我发现解决方案还不尽如人意。问题是$（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;
    }
});

Answer 3

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

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

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

3 个答案: