整个页面作为拖放区进行拖放答案

【问题标题】：Entire page as a dropzone for drag and drop整个页面作为拖放区进行拖放
【发布时间】：2015-03-29 08:18:35
【问题描述】：

在编写接受文件输入的 Web 应用程序时，我想使用拖放操作，但我不希望页面上只有一个小的拖放区。我认为如果您可以放在页面上的任何位置会更方便。幸运的是，window.ondrop 事件会在页面的任何位置触发，但我想要一些花哨的效果来直观地向用户展示拖放是可能的。

为此，只需检测文件何时拖入窗口以及何时拖出，以触发显示该应用程序已启用拖动的用户。事实证明，拖动事件并不那么方便。我假设window.ondragenter 只会在用户进入页面时触发一次。然后当你离开窗口时，它会触发window.ondragleave。错误的。当鼠标在页面中的子元素上移动时，它会不断触发。

我查看了事件对象中可用的属性，试图找到任何可以隔离我需要的东西，但没有任何效果。我得到的最远的结果是能够更改body 的背景颜色。并且仅当页面上没有其他内容时。

大量的文件上传网站都做对了。例如，Imgur 和 WeTransfer。他们的网站都是用意大利文编码和压缩到无法阅读的程度，我通过谷歌搜索找不到任何关于该主题的内容。

那么如何做到这一点呢？

【问题讨论】：

我知道是 6 年后的事了，但现在似乎可以使用 Javascript 将处理程序绑定到页面根 HTML 元素上的drop 和dragover。有什么理由这是一个坏主意吗？
啊，另一个问题是更简单地使用 HTML5 和根 html 元素作为放置目标。是的，这确实很好用。 stackoverflow.com/questions/3144881/…
@pbarranis 我不明白你在问什么。您链接的问题完全是同一个问题，只是措辞不同。他说的是dragenter/dragleave 的不一致解雇。我的答案解决了根本问题，而替代答案采用了 Gmail 和 Imgur 在 2013 年左右使用的setTimeout 方法。我特别试图找到比setTimeout 更好、响应更快的解决方案。我的解决方案确实使用 JavaScript 将事件绑定到根元素 (window)。这不是一个坏主意，因为我已经这样做了。
公平地说，这个问题具体是“如何在用户拖入页面后立即突出显示 small 放置区”。这是“在用户拖入页面后立即将 整个页面 突出显示为放置区”。但底层机制是相似的。

标签： javascript css drag-and-drop

【解决方案1】：

诀窍是使用覆盖整个页面的拖放区，并缓存window.ondragenter 的target 以与window.ondragleave 的target 进行比较。

首先，dropzone：

<style>
div.dropzone
{
    /* positions to point 0,0 - required for z-index */
    position: fixed; top: 0; left: 0; 
    /* above all elements, even if z-index is used elsewhere
       it can be lowered as needed, but this value surpasses
       all elements when used on YouTube for example. */
    z-index: 9999999999;               
    /* takes up 100% of page */
    width: 100%; height: 100%;         
    /* dim the page with 50% black background when visible */
    background-color: rgba(0,0,0,0.5);
    /* a nice fade effect, visibility toggles after 175ms, opacity will animate for 175ms. note display:none cannot be animated.  */
    transition: visibility 175ms, opacity 175ms;
}
</style>
<!-- both visibility:hidden and display:none can be used,
     but the former can be used in CSS animations -->
<div style="visibility:hidden; opacity:0" class="dropzone"></div>

即使放置区将覆盖整个页面，使用visibility:hidden 或display:none 也会将其隐藏在视图之外。我使用了visibility:hidden，以便可以使用 CSS 动画来制作过渡动画。

分配事件

<script>
/* lastTarget is set first on dragenter, then
   compared with during dragleave. */
var lastTarget = null;

window.addEventListener("dragenter", function(e)
{
    lastTarget = e.target; // cache the last target here
    // unhide our dropzone overlay
    document.querySelector(".dropzone").style.visibility = "";
    document.querySelector(".dropzone").style.opacity = 1;
});

window.addEventListener("dragleave", function(e)
{
    // this is the magic part. when leaving the window,
    // e.target happens to be exactly what we want: what we cached
    // at the start, the dropzone we dragged into.
    // so..if dragleave target matches our cache, we hide the dropzone.
    // `e.target === document` is a workaround for Firefox 57
    if(e.target === lastTarget || e.target === document)
    {
        document.querySelector(".dropzone").style.visibility = "hidden";
        document.querySelector(".dropzone").style.opacity = 0;
    }
});
</script>

下面是这个过程：你将一个文件拖到窗口上，window.ondragenter 会立即触发。 target 设置为根元素<html>。然后您立即取消隐藏覆盖整个页面的放置区。 window.ondragenter 将再次开火，这次目标是您的放置区。每次dragenter 事件触发时，它都会缓存目标，因为这将是与您拖出窗口时触发的最后一个window.ondragleave 事件匹配的目标。

为什么会这样？我不知道，但那是怎么做的。这几乎是用户拖出页面时触发的唯一工作方法。

我相信它会起作用，因为一旦放置区被取消隐藏，它将始终成为最后一个目标。它涵盖了页面的每个像素，甚至包括<html> 标签。此方法在离开窗口时依赖于 dragleave 触发。 ~~不幸的是，有一个bug in Firefox 阻止它正常工作。请为它投票，以便它尽快得到修复~~。从 Firefox 57.0.2 开始，dragleave 似乎可以正常触发。但是，需要一种解决方法，检查 document 而不是缓存的元素：

if(e.target === lastTarget || e.target === document)

Here's a JSBin of it in action。已在最新的 Chrome、Firefox、Edge 和 IE11 中测试。

【讨论】：

这在 Firefox 中不起作用，因为 dragleave 返回的 event.target 是 HTML 文档，它与最后一个缓存的元素（很可能是 .dropzone）不匹配。
@DannyLin 不幸的是，有一个bug in Firefox 阻止它正常工作。请为它投票，以便它尽快得到修复。
啊，看来这个bug现在已经修复了？ Firefox 在离开窗口时可靠地将document 作为event.target 返回。我在答案中包含了这个解决方法。

【解决方案2】：

我稍微改变了接受的答案，因为不想隐藏 Dropzone。所以也许这个微小的修改对其他人有帮助：

1- 制作全宽隐藏包装：

<div class="wrapper" style="visibility:hidden; opacity:0" >DROP HERE</div>

2- 在 [dragenter] 事件中显示它：

window.addEventListener("dragenter", function(e){ // drag start
    // unhide our green overlay
    showWrapper();
    lastTarget = e.target; // cache the last target here
});

3- 如果用户放置文件，则将其传递给 Dropzone：

window.addEventListener("drop", function(e){

    e.preventDefault();
    hideWrapper();

    // if drop, we pass object file to dropzone
    var myDropzone = Dropzone.forElement(".dropzone");
    myDropzone.handleFiles(e.dataTransfer.files);

});

我在codepen 上做了一个现场演示，提供了更多详细信息。谢谢

【讨论】：