HTML5ドラッグ＆ドロップ：ドロップターゲットがリッスンすべき3つのイベント

ドロップを受け入れるために必要な3つのイベント

HTML5のドラッグ＆ドロップAPIにおいて、ある要素を「ドロップターゲット」として機能させ、ドロップを受け入れるようにするには、少なくとも以下の3つのイベントをリッスン（監視）する必要があります。

1. dragenter イベント

ドラッグ中の要素がターゲット領域に入った瞬間に発生するイベントです。このイベントは、そのドロップターゲットがドロップを受け入れるかどうかを判断するために使用されます。ドロップを受け入れる場合は、必ずこのイベントをキャンセル（preventDefault() を呼び出す）しなければなりません。キャンセルしないと、後続のドラッグ関連イベントが発生せず、ドロップ操作自体も許可されません。

2. dragover イベント

ドラッグ中、ポインタがターゲット上で移動するたびに繰り返し発生するイベントです。このイベントでは、ユーザーにどのようなフィードバックを表示するかを決定します。イベントをキャンセルすると、DataTransfer オブジェクトの dropEffect 属性の値（copy、move、link など）に基づいて、フィードバック（通常はカーソルの見た目）が自動的に更新されます。これにより、ユーザーに対して実行される操作の種類を視覚的に伝えることができます。

3. drop イベント

ユーザーが実際にドロップ操作を行ったときに発生するイベントです。このイベントの中で、ドラッグされてきたデータを取得し、実際のドロップ処理を実行します。ブラウザの既定の動作（リンクを開くなど）を防ぐため、ここでも通常は preventDefault() を呼び出します。

基本的な実装例

const target = document.getElementById('drop-zone');

target.addEventListener('dragenter', (e) => {
  e.preventDefault(); // ドロップを受け入れる
});

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy'; // フィードバックを指定
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  // ここでドロップ処理を実行
});

まとめ

ドロップターゲットとして正しく動作させるためには、「dragenter」で受け入れ可否を決定し、「dragover」でユーザーへのフィードバックを制御し、「drop」で実際の処理を行う——この3つのイベントを適切にハンドリングすることが重要です。特に dragenter と dragover の両方でイベントをキャンセルしないとドロップが成立しないため、実装時には注意が必要です。