整个页面作为拖放区进行拖放
Posted
技术标签:
【中文标题】整个页面作为拖放区进行拖放【英文标题】：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 元素作为放置目标。是的，这确实很好用。 ***.com/questions/3144881/…
@pbarranis 我不明白你在问什么。您链接的问题完全是同一个问题，只是措辞不同。他说的是dragenter/dragleave 的不一致解雇。我的答案解决了根本问题，而替代答案采用了 Gmail 和 Imgur 在 2013 年左右使用的setTimeout 方法。我特别试图找到比setTimeout 更好、响应更快的解决方案。我的解决方案确实 使用 JavaScript 将事件绑定到根元素 (window)。这不是一个坏主意，因为我已经这样做了。
公平地说，这个问题具体是“如何在用户拖入页面后立即突出显示 small 放置区”。这是“在用户拖入页面后立即将 整个页面 突出显示为放置区”。但底层机制是相似的。
【参考方案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 上做了一个现场演示，提供了更多详细信息。 谢谢
【讨论】：
以上是关于整个页面作为拖放区进行拖放的主要内容，如果未能解决你的问题，请参考以下文章