みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Drag and Drop APIを試す 🖱

Drag and Drop APIを検証しました。

developer.mozilla.org

実装手順

最小構成だと、

  1. ドラッグ可能にしたい要素のdraggableをtrueに設定する
  2. ドロップ可能にしたい要素にdragoverイベント、dropイベントを設定する
  3. dragoverイベント、dropイベントに設定した関数内でpreventDefaultを設定する

で、OKです。

DEMO

左側の赤い要素がドラッグ可能な要素、右側の青い要素がドロップ可能な範囲です。
dragleaveイベントの実装は必須ではないですが、検証のために実装しています

イベントの発生順

ドラッグの開始から終了までを監視すると、

  1. dragstart
  2. dragenter
  3. dragover
  4. (drop) ※ ドロップ可能な範囲でドラッグを終了した場合に発生
  5. dragend

の順で発生しました。

ドラッグ終了(dragendイベント発生)時にドロップ可能な範囲で終了したかを判定する

evt.dataTransfer.dropEffectの値で判定できます。
ドラッグがキャンセルされた場合はnoneが、成功した場合は操作の種類が入っているようです。

developer.mozilla.org

document.getElementById('drag').addEventListener('dragend', (evt) => {
  if (evt.dataTransfer.dropEffect === 'none') {
    // ドロップ可能エリア外
  } else {
    // ドロップ可能エリア内
  }
});

Google Chrome(98.0.4758.80)で確認したところ、ドロップが成功した場合は、'copy'という文字列が入ってました。