jQueryでドラッグアンドドロップ機能を作っている際、
e.dataTransfer.files
でドロップされたファイルが取得できない問題に出会った。
先に結論
e.originalEvent.dataTransfer.files
でアクセスすればいける。
jQueryのeventは独自のeventらしい。。わかりづらい
originalEventが生のjsのイベントのようです。
参考:jQuery Event から DOM Event を取る
公式:https://api.jquery.com/category/events/event-object/
解決
元のコード
元のコード.js
drag_area.on('drop', function (e) {
e.preventDefault();
// ...
this.input.files = e.dataTransfer.files;
}
修正コード
修正コード.js
drag_area.on('drop', function (e) {
e.preventDefault();
// 変更
this.input.files = e.originalEvent.dataTransfer.files;
}