JavaScript: Drag & Drop API が動作しない時の確認事項

HTML5 の Drag & Drop API を使ってコードを書いたけど、 上手く動作してくれない場合は、以下のことを確認してください。

「dragover」イベントハンドラと「drop」イベントハンドラで、 preventDefault() メソッドを呼び出しているかどうか。

この記述がないと Drag & Drop API は機能しません。

仮に、ドロップ側の対象を「document」とします。その場合は次のようなコードになります。


document.addEventListener('dragover', function(e){
    e.preventDefault(); 
    // 以下、処理があれば記述
}, false);
   
document.addEventListener('drop', function(e){
    e.preventDefault();
    // 以下、処理を記述
}, false);

この記述がないと、ブラウザ標準の動作が優先されてしまい、Drag & Drop API が動作しません。

ですから、明示的に preventDefault() メソッドでブラウザ標準の動作をキャンセルしてください。

特に、「dragover」時の preventDefalut() を忘れがちなので注意してください。

もし、Drag & Drop API がうまく機能しない場合は、上記の点を確認してみてください。

JavaScript入門