在编写带有文件输入的网络应用程序时，我想使用拖动＆＃39; n＆＃39;放弃，但我不想在页面上只有一个小的dropzone。我认为如果你可以放在页面的任何地方会更方便。幸运的是，window.ondrop事件会在页面的任何地方触发，但我想要一些奇特的效果来直观地向用户显示拖放是可能的。
要做到这一点，只需检测文件被拖入窗口的时间，以及当被拖出时，触发显示的效果用户该应用程序已启用拖动功能。事实证明拖拽事件并不那么方便。当用户进入页面时，我假设window.ondragenter只会触发一次。然后当您离开窗口时，它会触发window.ondragleave。错误。当鼠标移动到页面中的子元素时，它会不断触发。
我查看了事件对象中可用的属性，试图找到任何可以隔离我需要的东西，但没有任何效果。我得到的最好的是能够改变body的背景颜色。并且只有页面上没有其他内容。
大量的文件上传网站做对了。例如，Imgur和WeTransfer。他们的网站都是spahetti编码和压缩到不可读的地步，我无法通过谷歌搜索找到关于这个主题的任何内容。
那怎么办呢？
答案 0 :(得分：25)
诀窍是使用覆盖整个页面的dropzone，并缓存target的{{1}}以与window.ondragenter的{{1}}进行比较。
首先，dropzone：
target即使dropzone将覆盖整个页面，使用window.ondragleave或<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，因此可以使用CSS动画来设置过渡动画。
分配事件
display:none 所以这里是一个过程：你在窗口上拖动一个文件，window.ondragenter会立即触发。 visibility:hidden设置为根元素<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.
if(e.target === lastTarget || e.target === document)
{
document.querySelector(".dropzone").style.visibility = "hidden";
document.querySelector(".dropzone").style.opacity = 0;
}
});
</script>
。然后你立即取消隐藏覆盖整个页面的dropzone。 target会再次开火，这次目标是您的掉落区域。每次<html>事件触发时，它都会缓存目标，因为这将是与拖出窗口时触发的上一个window.ondragenter事件相匹配的目标。
为什么这样做？我不知道，但那是怎么做的。这几乎是用户拖动页面时触发的唯一工作方法。
我相信它有效，因为一旦dropzone被取消隐藏，它将始终成为最后一个目标。它涵盖了页面的每个像素，甚至是dragenter标记。离开窗口时，此方法依赖于dragleave触发。 不幸的是，有bug in Firefox阻止它正常工作。请投票支持，以便及早修复。从Firefox 57.0.2开始，dragleave似乎正常启动。但是，需要一种解决方法，检查window.ondragleave而不是缓存的元素：
<html>Here's a JSBin of it in action。在最新的Chrome，Firefox，Edge和IE11中进行了测试。