Javascript 如何使用窗口覆盖和多个拖放区处理文件拖放？

我希望能够检测到用户何时将文件拖到窗口中，并在整个应用程序上弹出一个覆盖图，显示用户可以将文件上载到的各个文件夹

到目前为止，我知道我可以监听窗口中的“dragenter”并显示我的覆盖图，监听覆盖图中的“dragleave”以隐藏它，但问题似乎是，在拖放区域上拖动会触发覆盖图的dragleave事件，从而使覆盖图隐藏（这使窗口dragenter事件显示覆盖，依此类推）

我在我的文件夹Dropzone中使用Dropzone.js。我环顾四周，看到了与我类似的问题，但没有一个解决了这个问题

编辑：我在StackOverflow的其他地方找到了一个解决方案：

---

解决方案是检查dragleave上的事件，如果pageX和pageY都为0，则表示dragleave是因为用户离开了窗口，而不是被拖到某个DropZone上。

dragleave事件触发的速度比我们想象的要快，因此我们可以延迟进程

 Dropzone.autoDiscover = false;
$("div#upload").dropzone({
    url: "upload.php",
    addRemoveLinks:true,
    paramName:"composeUpload",
    init: function() {
        myDropZone = this;
        this.on('dragover', function(e,xhr,formData){
           $('.overlay').fadeIn();
          stopLoading(); //stops local file opens
            return false;
        });
      this.on('dragleave', function(e,xhr,formData){
           setTimeout(function(){
             $('.overlay').fadeIn();
           },8000);
        });           
    }
});

如果将文件放置在空div或覆盖上，浏览器将在本地打开该文件，因此我们必须停止默认设置

function stopLoading(){
   window.addEventListener("dragover",function(e){
    e = e || event;
    e.preventDefault();
   },false);
  window.addEventListener("drop",function(e){
    e = e || event;
    e.preventDefault();
  },false);
}

我不知道这是你想要的答案，但肯定会给你一个主意。谢谢。

在这个特定场景中（在全屏覆盖中使用Dropzone实例，只有在拖动文件时才可见，并且你只希望用户将文件放到Dropzone上，而不是整个覆盖上），下面是我为解决这个问题所做的

• 在窗口收听“dragenter”
  • 如果event dataTransfer对象有一个类型数组，其中存在1项，类型[0]==“Files”，则显示覆盖（这样，如果拖动文本之类的内容，则不显示覆盖）
• 在覆盖层上收听“dragleave”
  • 如果dragleave事件pageX和pageY都为0，那么用户将从文档中拖出，我们应该隐藏覆盖，否则他们将拖出其中一个DropZone
• 在覆盖层上收听“dragover”
  • 如果屏幕上有任何元素的类为“dz drag hover”，则将事件dataTransfer.dropEffect设置为“copy”，因为我们将鼠标悬停在dropzone上
  • 否则将event dataTransfer.dropEffect设置为“none”，并设置preventDefault（）

以下是一些未经测试的javascript：

function handleDragEnter( e ) {
    // make sure we're dragging a file
    var dt = ( e && e.dataTransfer );
    var isFile = ( dt && dt.types && dt.types.length == 1 && dt.types[0] == "Files" );
    if ( isFile ) {
        // and, if so, show the overlay
        showOverlay();
    }
}

function handleDragLeave( e ) {
    // was our dragleave off the page?
    if ( e && e.pageX == 0 && e.pageY == 0 ) {
        // then hide the overlay
        hideOverlay();
    }
}

function handleDragOver(e) {
    // look for any dropzones being hovered
    var isHovering = document.getElementsByClassName( "dz-drag-hover" ).length > 0;
    if ( isHovering ) {
        // found some? then we're over a dropzone and want to allow dropping
        e.dataTransfer.dropEffect = 'copy';
    } else {
        // we're just on the overlay. don't allow dropping.
        e.dataTransfer.dropEffect = 'none';
        e.preventDefault();
    }
}

function showOverlay() {
    // only show the overlay if it's not already shown (can prevent flickering)
    if ( getComputedStyle(overlay, null).display == "none" ) 
        overlay.style.display = "block";
    }
}

function hideOverlay() {
    overlay.style.display = "none";
}

// listen to dragenter on the window for obvious reasons
window.addEventListener("dragenter", handleDragEnter);
// our fullscreen overlay will cover up the window, so we need to listen to it for dragleave events
overlay.addEventListener("dragleave", handleDragLeave);
// same thing for dragover
overlay.addEventListener("dragover", handleDragOver);

---

要显示覆盖图的目的是什么？要停止文件上载？默认情况下，页面将显示已上载的文件。当用户将文件拖到屏幕上时，覆盖图将显示他们可以上载到的可用文件夹（有点像imgur.com处理文件上传覆盖的方式，除了多个dropzone和没有全局dropzone）。因此，覆盖的目的是向用户显示文件夹dropzone。您只是想显示覆盖，或者希望用户输入，如从覆盖中选择文件夹？我想在用户拖动文件时显示覆盖。覆盖包含文件的dropzone。然后，用户会将文件放到覆盖的dropzone之一上这个答案提供了关于这个问题的更多细节