整个页面作为拖放的dropzone-Java 学习之路

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

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

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

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

那么怎么做呢？

1 回答

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

First, the 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>

即使dropzone将覆盖整个页面，使用 visibility:hidden 或 display:none 也会将其隐藏在视图之外 . 我使用了 visibility:hidden ，因此可以使用CSS动画来设置过渡动画 .

Assigning the events

<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>

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

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

我相信它有效，因为一旦dropzone被取消隐藏，它将成为最后一个目标 always . 它涵盖了页面的每个像素，甚至是 <html> 标签 . 离开窗口时，此方法依赖于dragleave触发 . 不幸的是，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 .

回复于 2024-05-17T11:49:10+08:00

整个页面作为拖放的dropzone

1 回答

相关问题