ドラッグ＆ドロップしよう！ (5/5)

HTML5のドラッグ＆ドロップは、HTMLのWebページ内にある要素だけしか使えないわけではありません。Webブラウザ外にあるものをドロップすることもできるのです。その一例が「ファイル」です。ファイルをドラッグ＆ドロップしてページ内にその内容を読み込んで表示させる、なんてことも可能なのです。

ただし、そのためにはHTML5でファイルを扱うための「File API」というものについて理解していないといけません。このAPIについては別の記事にゆずるとして、実際にファイルをドロップするサンプルを作ってみましょう。ここでは、イメージをドラッグ＆ドロップして<img>タグに表示させてみます。

まず、HTML側に、下のリストに挙げたような形で<img>タグを用意してください。続いて、script.js側に、下のリストにあるdoDragOverとdoDropを用意してください。これでイメージファイルをドラッグ＆ドロップして表示させることができるようになります。

ここでは、doDragOverでドロップされたオブジェクトの形式が"Files"かどうかをチェックしています。これでファイルを受け入れることができるようになります。

doDropでは、ドロップされたファイルを読み込んで<img>のsrcに設定をしています。ドロップされたファイル類は、event.dataTransferの「files」にまとめられています。これはFileListオブジェクトとなっており、ここにドロップされたファイルがまとめられています。ここでは、event.dataTransfer.files[0]で最初のファイルを取り出し、これを読み込むことにしています。

ファイルからのデータの読み込みは、FileReaderというものを使って行っています。readAsDataURLというメソッドでファイルの中身をすべて読み込み、onloadendイベントで読み込み完了したらresult（読み込んだ内容）を<img>のsrcに設定しています。

ファイル関係については別途調べるとして、このようにドラッグ＆ドロップを利用することで、ファイルの読み込みも簡単に行えるようになった、ということはぜひ覚えておきましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※Webページに用意するドロップ用の要素

<img id="img1" ondragover="doDragOver(event);"
	ondrop="doDrop(event);"
	class="droppable">


※script.jsに用意するスクリプト


function doDragOver(event){
	var type = event.dataTransfer.types.contains("Files");
	if (type){
		event.preventDefault();
	}
}

function doDrop(event){
	var img = document.getElementById("img1");
	var file = event.dataTransfer.files[0];
	var reader = new FileReader();
	reader.onloadend = function() {
		img.src = reader.result;
	}
	reader.readAsDataURL(file);
}