HTML5のdragenterイベントとdragoverイベントの違いを徹底解説

HTML5のドラッグ＆ドロップAPIを実装する際、dragenterイベントとdragoverイベントは似たようなタイミングで発生するため、混同されやすい存在です。しかし、それぞれ役割が明確に異なります。本記事では、両者の違いを整理し、正しい使い方をコード例とともに解説します。

dragenterイベントとは

dragenterイベントは、ドラッグ中の要素がドロップ対象の領域に入った瞬間に一度だけ発生します。このイベントの主な役割は、ドロップ先がそのドロップを受け入れるかどうかを判定することです。

ドロップを受け入れる場合は、このイベントをキャンセル（event.preventDefault()の呼び出し）する必要があります。キャンセルしなかった場合、ブラウザはドロップを許可せず、後述のdropイベントも発生しません。

dragoverイベントとは

dragoverイベントは、ドラッグ中の要素がドロップ対象の領域上にいる間、数十ミリ秒ごとに繰り返し発生するイベントです。このイベントの主な役割は、ユーザーにどのようなフィードバック（視覚的な反応）を見せるかを決定することです。

イベントをキャンセルすると、DataTransfer.dropEffect属性の値（copy、move、link、none）に基づいて、カーソルなどのフィードバック表示が更新されます。

両者の違いの比較表

基本的な実装例

実際にドロップを機能させるには、dragenterとdragoverの両方でpreventDefault()を呼び出すのが一般的です。どちらか一方でも呼び忘れると、dropイベントが発火しなくなる点に注意しましょう。

const dropArea = document.querySelector('#drop-area');

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

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault(); // 継続的にドロップ許可を維持
  e.dataTransfer.dropEffect = 'copy'; // カーソル表示をコピーに設定
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text');
  console.log('ドロップされたデータ:', data);
});

まとめ

• dragenter：領域に入った瞬間に1回発生し、「ドロップを受け入れるか」の判定に使う。
• dragover：領域上にいる間ずっと発生し、「どんなフィードバックを見せるか」の制御に使う。
• ドロップを有効化するには、両イベントでpreventDefault()を呼び出す必要がある。
• カーソルの見た目を変えたい場合は、dragover内でdropEffectを設定する。

役割を正しく理解して使い分けることで、直感的で分かりやすいドラッグ＆ドロップUIを実装できます。