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 がうまく機能しない場合は、上記の点を確認してみてください。