Drag and Drop APIを試す 🖱 - みかづきブログ・カスタム

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

developer.mozilla.org

実装手順

最小構成だと、

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

で、OKです。

DEMO

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

イベントの発生順

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

dragstart
dragenter
dragover
(drop) ※ ドロップ可能な範囲でドラッグを終了した場合に発生
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'という文字列が入ってました。

追記

iOSで動作していないことに気付いたので、iOS対応版を検証しました。
Androidは未検証です。

blog.kimizuka.org