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>