如何處理文件拖放與窗口覆蓋和多個拖放區域？

我希望能夠檢測用戶何時將文件拖入窗口並彈出覆蓋整個應用程序的覆蓋圖，以顯示用戶可以上傳文件的各種文件夾。如何處理文件拖放與窗口覆蓋和多個拖放區域？

到目前爲止，我知道我可以聽到「dragenter」窗口並顯示我的覆蓋圖，並聽取覆蓋「dragleave」以隱藏它，但問題似乎是拖過拖放區導致疊加層的dragleave事件觸發，這會使疊加層隱藏（這會使窗口dragenter事件顯示疊加層，等等）。

我爲我的文件夾dropzones使用Dropzone.js。我環顧四周，看到類似的問題，但沒有解決這個問題。

編輯：我發現（各種）中的溶液在別處在計算器上：jQuery Drag-and-Drop Flickering on Hover (Webkit only)

的解決方案是檢查dragleave事件，並且如果pageX屬性和pageY都爲0，則這意味着dragleave是因爲用戶離開了窗戶，而不是拖着其中一個下拉區。

來源

2017-07-07 Buns of Aluminum

對於其目的是要顯示的疊加？要停止文件上傳？ –

該頁面默認顯示已上傳的文件。當用戶將文件拖放到屏幕上時，疊加層將顯示可以上傳的可用文件夾（有點像imgur.com處理文件上載疊加層，除了多個下拉框和全局下拉區）。因此，疊加的目的是向用戶顯示文件夾下拉框。 –

你只是想顯示覆蓋或期待用戶輸入，如從覆蓋選擇文件夾？ –

在這種特定的情況下（在全屏覆蓋圖中使用Dropzone實例，只有在拖動文件時纔可見，並且您只希望用戶將文件放到拖放區而不是整個覆蓋圖），以下是我所做的解決問題。

試聽窗口「的dragenter」
- 上如果事件dataTransfer對象具有類型陣列1項本和類型[0] ==「文件」，然後顯示所述覆蓋層（這樣，我們不顯示覆蓋，如果是這樣的文字被拖動）
聽上覆蓋的「dragleave」
- 如果dragLeave事件pageX屬性和pageY都爲0，則該用戶d衣衫襤褸出文檔的，我們應該隱藏覆蓋，否則會被拖着在dropzones
聽上覆蓋了「的dragover」之一
- ，如果有一個在屏幕上的任何元素類「dz-drag-hover」，然後將事件dataTransfer.dropEffect設置爲「複製」，因爲我們將鼠標懸停在dropzone上。其他事件dataTransfer設置其他事件。DROPEFFECT爲「無」和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);

來源

2017-07-12 15:29:09

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); 
}

我不這是你要找的答案，但文件絕對會給你一個想法。謝謝。

來源

2017-07-08 00:42:24

如何處理文件拖放與窗口覆蓋和多個拖放區域？

回答

相關問題