整个页面作为拖放区

Question

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

要做到这一点，只需要检测文件何时被拖入window，以及何时被拖出，以触发向用户显示该应用程序已启用拖动的效果。事实证明，拖动事件并不是那么方便。我假设 window.ondragenter 只会在用户进入页面时触发一次。然后，当您离开 window 时，它会触发 window.ondragleave。错误的。当鼠标移过页面中的子元素时，它会不断触发。

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

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

那么如何做到这一点？

Answer 1

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

首先，空降区：

<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 上，window.ondragenter 立即触发。 target 设置为根元素 <html>。然后，您立即取消隐藏覆盖整个页面的放置区。 window.ondragenter 将再次开火，这次目标是你的降落区。每次触发 dragenter 事件时，它都会缓存目标，因为这将是与你拖出 window.[= 时触发的最后一个 window.ondragleave 事件相匹配的目标。 29=]

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

我相信它是有效的，因为一旦取消隐藏 dropzone，它将始终成为最后一个目标。它覆盖了页面的每个像素，甚至 <html> 标签。此方法依赖于离开 window 时的 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 中测试工作。

Answer 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 的更多详细信息。谢谢

整个页面作为拖放区

Entire page as a dropzone for drag and drop

javascript

css

drag-and-drop