HTML5のドラッグ&ドロップでドロップが動作しない原因と解決方法

HTML5のドラッグ&ドロップが動作しない原因とは?

HTML5のドラッグ&ドロップAPIを使用していると、「要素はドラッグできるのに、なぜかドロップイベント(drop)が発火しない」という問題に直面することがあります。実は、これには明確な理由があります。

原因:dragoverイベントでpreventDefault()が呼ばれていない

ドロップを許可するには、dragoverイベントに対するハンドラを設定し、その中でデフォルトの動作をキャンセルする必要があります。dragoverイベントのデフォルトハンドラではドロップが許可されていないため、そのままではdropイベントは一切発火しません。

つまり、dropイベントを受け取る前に、dragoverイベントでe.preventDefault()を呼び出すことが必須なのです。

解決方法:ドロップを許可するための記述

ドロップを許可したい場合は、デフォルトハンドラの動作をキャンセルしてイベントを無効化します。具体的には、次の2つの方法があります。

• 属性で定義したイベントリスナーから false を返す
• イベントオブジェクトの event.preventDefault() メソッドを呼び出す

<div ondragover="return false">
<div ondragover="event.preventDefault()">

上記のように、ondragoverプロパティを持つdiv要素から false を返すことで、デフォルトの動作がキャンセルされます。その結果、ブラウザは「この要素へのドロップを許可する」と判断し、実際にドロップされた際にdropイベントが正しく発火するようになります。

まとめ

HTML5のドラッグ&ドロップでdropイベントが発火しない場合は、dragoverイベントハンドラ内でpreventDefault()(またはreturn false)を呼び出しているかを確認しましょう。このひと手間を加えるだけで、ドロップ操作が正常に機能するようになります。