今回はDrag And Dropしてみます。
ただやるんじゃ面白く無いのでローカルにある複数の画像ファイルをドラッグして画面に表示させるところまでやってみます。
JSとHTMLはこんな感じ。
Drag and Drop
Drop Here！！
EXIF Data from the JPEG file:
More EXIF details:
方法としては、ドラッグ対象となる要素にイベントを登録して必要とする処理を行わせます。
処理内容は、ドラッグしたファイルからファイル情報を読み込んだ後に画面に描画させます。
基本は前回と同じですね。ファイルの選択からドラッグをできるようにしただけですからね。。。
大元がこれイベントの登録をしています。
function init() {
dandd = new Nakaji();
window.addEventListener("dragenter", dandd.dragEnter, false);
window.addEventListener("dragleave", dandd.dragLeave, false);
var dropBox = {};
dropBox = document.getElementById("dropbox");
dropBox.addEventListener("dragover", dandd.dragOver, false);
dropBox.addEventListener("drop", dandd.drop, true);
}
あと、ドラッグしたファイルを読み込むときには「DataTransfer」という型をドロップしたファイルオブジェクトが情報を持っているのでこれを利用します。
// ドラッグされたデータを取得 var dt = event.dataTransfer; var files = dt.files; var count = files.length;
あとちょっと理由がわからなかったのですがメソッドがthisじゃだめだったのなぜなんだろうか？？？インスタンスかさせてないと認識できない？なのでメソッドを直接指定することにしました。
// thisじゃだめなのはなぜ？？？？
// メソッドの登録
reader.addEventListener("loadend", Nakaji.prototype.buildImageListItem, false);
だいたいできた。
■感想
・重い画像ファイルを一気にドラッグするとブラウザの処理が追いつかないみたいでファイル名が「undefined」になってしまうことがあるね。どうしたらいいものか。
(無理やりsleep()的なものおいておいた方がいいのかな？)
・これも後ろで非同期通信してみる（みたい）
・これだとIE、Chromeだと動かないのでクロスブラウザ的な対策が必要なんだな
そもそもIEは「addEventListener」がないからね
・GPSの情報取得してグーグルマップに登録的なことをしたいでげす。
■デモ
■参考サイト
Drag & Drop - HTML5 版
JavaScript addEventListener()
W3C FileAPI in Firefox 3.6
Drag and drop file uploading using JavaScript
※コード汚かったけど結構参考になりました。ここだとSVGとかXHRとかもつかってアプロード中の処理もやってるからすごい。
