整个页面作为拖放的dropzone

Question

整个页面作为拖放的dropzone

bry*_*ryc 18 javascript css drag-and-drop

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

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

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

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

那么怎么做呢？

Answer 1

bry*_*ryc 27

诀窍是使用悬浮窗覆盖整个页面,并缓存target的window.ondragenter与比较target的 window.ondragleave.

首先,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>

Run Code Online (Sandbox Code Playgroud)

即使dropzone将覆盖整个页面,使用visibility:hidden或display:none将其隐藏在视图中.我使用visibility:hiddenCSS动画可以用来动画过渡.

分配事件

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

Run Code Online (Sandbox Code Playgroud)

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

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

我相信它的作用是因为一旦dropzone被取消隐藏,它将永远是最后一个目标.它涵盖了页面的每个像素,甚至是<html>标签.离开窗口时,此方法依赖于dragleave触发.~~不幸的是,Firefox中存在一个阻止其正常工作的错误.请投票支持,以便及早修复~~.从Firefox 57.0.2开始,dragleave似乎正常启动.但是,需要一种解决方法,document而不是检查缓存的元素:

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

Run Code Online (Sandbox Code Playgroud)

这是它的一个JSBin.测试了最新的Chrome,Firefox,Edge和IE11.

归档时间：	10 年，10 月前
查看次数：	8521 次
最近记录：	6 年，4 月前