HTML5のドラッグ＆ドロップはこれ書いてる時点でFirefox、Chrome、IEが対応。
しかしIEの場合はFileReaderとデータURI未対応だから全く面白みがない。
Drag出来るといってもMooToolsやjQueryなどで実装するようなぬるぬる動かすようなものではなく、
html5.jpのチェックページにあるツールのように、右から左へ受け流すようなことしか出来ない。
jQueryとの比較がこのサイトで見れる。
故にshapeshed.comのデモみたく、ゴミ箱にドキュメントを捨てたり、カートに商品を入れたりする用途には向いているが
自由奔放にドラッグさせるとなるとFrameworkの力を借りるより他ない。
サンプルでよく見るのはコンピューターにあるファイルをブラウザウィンドウにドラッグして、
そのファイルの中身をFileAPIで読み込んでこねこねするっていうやつだと思う。
以下に簡単なサンプルを示す。
最小構成例
function FileDrop(file, el){
if (!file) {
return;
}
if(!file.type.match(/image\/\w+/)){
alert('画像をドロップしてください。');
}
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
}
reader.readAsDataURL(file);
el.appendChild(img);
}
window.onload = function(){
var target = document.getElementById("target");
target.ondrop=function(e){
e.preventDefault();
FileDrop(e.dataTransfer.files[0],target);
};
target.ondragover=function(e){
e.preventDefault();
};
};
<div id="target" style="height:200px;background-color:#9CF;overflow:hidden;"></div>
解説
ondropイベントから渡されたDragEventオブジェクトにはDragEvent.dataTransferがあり、
filesプロパティにファイルの情報が配列として格納されている。
その中から最初の１つをFileDrop関数に渡して処理する。
FileDrop(e.dataTransfer.files[0],target);
FormのPOST送信時と同じくtypeプロパティが画像のファイルタイプなので、正規表現で画像かどうか調べる。
if(!file.type.match(/image\/\w+/)){
alert('画像をドロップしてください。');
}
img要素作っとく。
var img = document.createElement("img");
FileReader APIインスタンス作成。
var reader = new FileReader();
FileReaderのイベントハンドラ。
readAsDataURLでロードされたら画像のsrcをデータスキームに設定。
reader.onload = function(e) {
img.src = e.target.result;
}
readAsDataURLメソッドでファイルの中身を読み込む。
reader.readAsDataURL(file);
画像を要素に入れて表示。
el.appendChild(img);
こういうことするなら確かに便利。
でもシェアの高いIEが実装してない現状ではAjax Upload使って実装するしかないし、
ドラッグドロップも既存ライブラリを使う方が手っ取り早いと思った。
参考
３つ目のサイトが物凄い詳しい。
MooToolsとの組み合わせ例
ChromeはローカルやiframeだとFileReaderが動かないらしい。Firefoxで確認できます。