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

Posted 2023-05-08

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

【英文标题】：Show overlay on 'dragenter' when dragging a file from desktop to the browser

【发布时间】：2012-03-01 18:30:46

【问题描述】：

我正在尝试实现与 imgur.com 上相同的效果（将文件从桌面拖动到 imgur.com，您会看到一个很酷的叠加层）。感谢这篇文章，已经有了一个可行的解决方案：Event propagation, overlay and drag-and-drop events

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

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

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

谁有更好的建议？

【参考方案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 ***/
        
    );
)();

【讨论】：

这是我发现的唯一一个完美运行的解决方案......我不确定 setinterval 和内存泄漏是否会出现问题，但到目前为止，它运行良好。

自此之后有人找到更好的解决方案了吗？

你为什么首先用法语写你的答案？然后翻译成英文？

一个（稍微）更好的解决方案，基于这个，是在dragleave 事件中激活setTimeout 处理程序。存储计时器的返回值，并在dragover 上清除它。我发现实际上根本不需要延迟，因为dragleave 和dragover 事件是同时触发的。

在下面发布我的版本以澄清。

【参考方案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;
        
    );
)();

【参考方案3】：

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

var dragging = false;

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

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