在ondragover事件中拖動dataTransfer數據不可用

Question

我試圖獲得html5拖放事件的掛起。

function rowDragStart(event) { 
    let targetRowId = event.target.attributes.row.value; 
    event.dataTransfer.setData("text/plain", targetRowId); 
} 

function rowDragOver(event) { 
    event.preventDefault(); 
    let draggingId = event.dataTransfer.getData('text'); 
} 

現在我只是想把東西放在dragStart中的dataTransfer對象中，並在dragOver中檢索它。問題在於拖延時間不存在。我已經設置了斷點，這些事件被調用了，但getData('text')返回了空字符串，以及我能想到的所有其他可能性。

Answer 1

按照HTML5將&掉落說明書的Event-Summary，所述Drag data store的dragover事件的模式爲保護模式。

保護模式：

在代表項目的拖拽數據存儲列表中的格式和類型的拖動的數據可以列舉，但數據本身是不可用，可以添加任何新數據。

這是爲文件和HTML5元素的拖動&下降。

換句話說 - 您可以訪問拖動元素的類型和拖動元素的數量，但是直到您執行實際拖放操作時，它們的數據纔可用。

這是由設計

下面是一個例子爲HTML5元素拖動&下降：

function dragstart_handler(ev) { 
 
    console.log("drag start"); 
 
    // Change the source element's background color to signify drag has started 
 
    ev.currentTarget.style.border = "dashed"; 
 
    // Set the drag's format and data. Use the event target's id for the data 
 
    ev.dataTransfer.setData("text/plain", ev.target.id); 
 
} 
 

 
function dragover_handler(ev) { 
 
    console.log("drag over, total types:", ev.dataTransfer.types.length, 'type available:', ev.dataTransfer.types[0]); 
 
    ev.preventDefault(); 
 
} 
 

 
function drop_handler(ev) { 
 
    console.log("drop, total types:", ev.dataTransfer.types.length, 'data dropped:', ev.dataTransfer.getData('text/plain')); 
 
    ev.preventDefault(); 
 
    
 
    // Clear the drag data cache (for all formats/types) 
 
    ev.dataTransfer.clearData(); 
 
}

div { 
 
    margin: 0em; 
 
    padding: 2em; 
 
} 
 
#source { 
 
    color: blue; 
 
    border: 1px solid black; 
 
} 
 
#target { 
 
    border: 1px solid black; 
 
}

<div> 
 
    <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> 
 
    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> 
 
</div> 
 
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>