☰

ドラッグデータ転送データはondragoverイベントでは利用できません質問する

tag-icon • tag-icon javascript html html5-draggable
ドラッグデータ転送データはondragoverイベントでは利用できません質問する

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')考えられる他のすべての可能性とともに空の文字列を返します。

ベストアンサー1

によるイベント概要Drag data storeHTML5ドラッグ＆ドロップ仕様では、イベントのモード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>

おすすめ記事