在html5中使用dragleave後下降

我已註冊到HTML5 DnD事件以便從桌面獲取拖放文件。我看到的問題是，我總是在丟棄事件之前得到dragleave事件。在規範中沒有提到類似這樣的事情 - 如果你使用dragleave作爲沒有發生掉落的指標，那麼它就會混淆邏輯。在html5中使用dragleave後下降

var dropbox = document.getElementById("dropzone"); 
dropbox.addEventListener("dragenter", dragEnter, false); 
dropbox.addEventListener("dragleave", dragLeave, false); 
dropbox.addEventListener("dragover", dragOver, false); 
dropbox.addEventListener("drop", drop, false); 

function dragEnter(e){ 
    console.log("dragEnter ",e); 
    dropbox.style.backgroundColor = "red"; 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function dragLeave(e){ 
    console.log("dragleave"); 
    dropbox.style.backgroundColor = "white"; 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function dragOver(e){ 
    console.log("dragOver ",e); 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function drop(e){ 
    console.log("drop ",e); 
    var files = e.dataTransfer.files; 
    var count = files.length; 
    e.stopPropagation(); 
    e.preventDefault(); 
}

這是作爲設計工作還是我錯過了什麼？

來源

2011-01-21 Amir

這似乎是一個很好的參考：http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

基本上dragLeave是不是一個指標，沒有下降發生。這是一個可拖動對象被拖出另一個對象的指示器。
你不需要它。

[編輯：基本上，dragleave正在發射，因爲您拖動的項目來自您的桌面。它在你放棄它之前基本上是你的桌面。如果通過任何droptarget拖動桌面上的任何文件，它將觸發dragleave以指示它不再位於上一個對象（您的桌面）中，而現在位於新對象（「dropzone」）中。如果你有幾個dropzones，每次你拖過去，那麼其中的一個，dragleave會觸發。您應該使用drop事件來判斷是否發生了跌落。]

來源

2011-01-22 02:58:59 Gerrat

但我確實需要它，如果它沒有添加任何值，那麼我想他們沒有添加它。我需要它知道一個對象被拖出了拖動區域，這是這個事件假設要做的事情。但由於某種原因，即使用戶將該對象放置在放置區域上，它也會被解僱 - 對我來說，這聽起來像是一個bug，除非我閱讀手冊錯誤。 – Amir

@Amir：我說你不需要它的原因是因爲你說：「如果你用dragleave作爲一個指標，沒有下降發生......」。正如我所說，這並不表示沒有下降。你當然可以用它來表示「一個可拖動的對象被拖出另一個對象」......但正如我所說的那樣，這並不意味着沒有下降發生。 – Gerrat

dragleave事件實際上並沒有做到這一點。直到你將一個可拖動的對象移動到一個dropzone上，然後移動它而不會丟棄該dragleave激發的內容。它尚未實現用於檢測從拖放區拖出的以前丟棄的項目。它僅僅是dragstart和dragend之間的事件鏈的一部分。從規格來看，如果「拖動操作失敗」就會發生。（Firefox顯然有一個已知的問題，即使放下成功，dragleave事件也會被調用）。

http://www.w3.org/html/wg/drafts/html/master/editing.html#drag-and-drop-processing-model

所以你倆都部分正確。「這是一個可拖動對象被拖出另一個對象的指示器。」只要這個可拖動的對象以前沒有被丟棄，就是如此。此外，要確定沒有發生丟棄是dragleave事件的有效用法。

如果你想要完成的事情是知道在可拖動對象被刪除之後，它後來從dropzone中被移除（即用戶把東西放在垃圾桶中，然後決定他們想要拖出來），你將基本上扭轉先前的拖放事件......即，可拖動項目的容器現在將成爲拖放區域，並且您的原始拖放區域將包含可拖動項目，或者基於您的設置找出。

編輯：哲學推理...如果你可以假設，並非所有Zinks都Zorks，那麼你可以假設，並非所有的實現拖放應用程序/拖放功能將希望允許誰掉了東西，用戶的地方，以去除下降項目稍後。因此，在某些情況下使用拖放操作會導致瀏覽器的內存開銷維持以前項目先前被刪除的狀態。（在沒有「狀態」概念的情況下描繪拼圖遊戲）。

來源

2011-03-06 22:24:23 jenjenut233

提供死鏈接 – 2014-03-28 13:26:36

已更新，以修復鏈接到W3規格 – jenjenut233

在html5中使用dragleave後下降

回答

相關問題