今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き）

JavaScriptプログラミングのTOPへ

今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。

１：ドラッグ＆ドロップAPI

画面上の要素を。

画面外から。

２：File API

読み込み。

書き込み　※これは覚える必要はない。

シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。

※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。

では，ここから３分の時間のカウントを開始。集中して読もう。

（0：00〜前半の１分半）画面内でのドラッグ・ドロップ

（後半の1：30〜3：00）画面外からのドラッグ・ドロップ

参考資料

（0：00〜前半の１分半）画面内でのドラッグ・ドロップ

まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。

動作サンプル１
http://name-of-this-site.org/coding/h...

上部にある３要素を，下部にドラッグ・ドロップできる。

実行時には，マウスでつかんだ要素の情報がアラートで表示される。

「どんな要素を，どこにドロップしたか？」が分かるので

フルーツ・バスケット

商品のショッピングカート

ゲームの駒の移動

などを実装できる。

コードとしては，以下の要素があれば実現できる。

（１）ドラッグできる要素。

draggable="true" の属性を指定。

ondragstartイベントで，ドラッグするデータの保管。

（２）ドロップできる要素。

ondragoverイベントで，ドロップの許可。

ondropイベントで，ドロップ時のデータ取り出し。

この２要素・４項目があればよい。

上記の要点を踏まえつつ，具体的なコードをちらっと眺めてみよう。ここは真剣に読まず，ちらっとでよい。コメントに注目しよう。

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML5・ドラッグ＆ドロップのサンプル１</title>
<style>
div {
  border : solid 1px black;
  margin : 10px;
  padding : 10px;
  background-color : yellow;
}
</style>


<h3>HTML5のドラッグドロップのサンプル１</h3>


<!-- ドラッグできる要素 -->
<div draggable="true" ondragstart="f1(event)">リンゴ</div>
<div draggable="true" ondragstart="f1(event)">バナナ</div>
<div draggable="true" ondragstart="f1(event)">みかん</div>

↓

<!-- ドロップできる要素 -->
<div
  ondragover="f2(event);"
  ondrop="f3(event)">
  フルーツバスケット<br>
  （果物をドロップできます）
</div>


<script>

// ドラッグ開始時のイベント
function f1( event )
{
	// ドラッグ要素の中身の文字列を取得
	var s = event.target.innerHTML;
	
	// ドラッグイベントに文字列を格納
	event.dataTransfer.setData("text/plain", s);
}


// ドロップ受け付け判定
function f2( event )
{
	// ドロップを受け付ける
	// （イベントのデフォルト動作であるドロップの拒否を行なわない）
	event.preventDefault();
	
	// これが無いとドロップ不可能になる。
}


// ドロップ処理
function f3(event)
{
	// ページの遷移を防止
	//（これがないとドラッグ内容の文字列へブラウザが遷移する）
	event.preventDefault();

	// イベントに格納された文字列データを取り出し
	var s = event.dataTransfer.getData("text/plain");
	
	// 表示
	alert(s);
}

</script>

これだけ。

関数（イベント）が３つと，draggable="true" の属性指定でOK。

画面内でのドラッグ・ドロップ APIの利用は以上。

↑目次へ戻る

（後半の1：30〜3：00）画面外からのドラッグ・ドロップ

ブラウザの外からドラッグ・ドロップされたファイルを，File APIで読み取る。

動作例はこちら。

動作サンプル２
http://name-of-this-site.org/coding/h...

ためしに小さなファイルをドロップしてみよう。

何でもいい。ショートカットをドロップしてもOK。

ドロップしたファイルの情報が，アラートで表示される。

このコードも，２つの要素からなる。

（１）ドロップする要素。

（２）ドロップ時のイベント。
- ドロップしたファイルを FileReader というオブジェクトで読み取り。

具体的なコードは下記。チラッとだけ見てみよう。

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML5・ドラッグ＆ドロップのサンプル２</title>
<style>
div {
  border : solid 1px black;
  padding : 10px;
  background-color : yellow;
}
</style>


<h3>HTML5のドラッグドロップのサンプル２</h3>


<div
  ondragover="f1(event);"
  ondrop="f2(event)">
  ここにファイルをドロップしてね
</div>


<script>

// ドロップ受け付け判定
function f1( event )
{
	// ドロップを受け付ける
	event.preventDefault();
}


// ドロップ処理
function f2(event)
{
	// ページの遷移を防止
	//（これがないとドラッグ内容の文字列へブラウザが遷移する）
	event.preventDefault();

	// イベントに格納されたファイルを取り出し
	var f = event.dataTransfer.files[0];
	
	// ファイル情報を表示
	alert(
		"ファイル名：" + f.name 
		+ "\nファイルの型：" + f.type 
		+ "\nファイルサイズ：" + f.size / 1000 + " KB "
		+ "\n最終更新日時：" + f.lastModifiedDate
	);
	
	// ファイル内容の読み取り
	var reader = new FileReader(); // ファイルを読み取るオブジェクト
	reader.onloadend = function(){
		alert("ファイルの内容：" + reader.result);
	};
	reader.readAsDataURL( f );
}

</script>

ondragoverで「ドロップの受け付け許可」

ondropで「実際にドロップした時の処理」

という２つのイベントがあることを覚えておこう。

File APIでファイル情報を読み取れるのは

ファイルを要素にドロップした時

ファイル選択ダイアログでファイルを選んだ時

など。

利用例としては，

読み取った情報をすぐにAjaxでサーバ送信すれば，ドロップするだけの使いやすいアップローダができる。

あるいは，読み取った情報をすぐに画面表示すれば，アップ用のサムネイル表示や，確認フォームが実現できる。

これが File API である。

ここまでで３分。

HTML5の Drag & Drop API と，File API の使い方を覚えた。

今後，これらのAPIを使いたい時には，基礎を踏まえて自分で実装することができる。

↑目次へ戻る

参考資料

さらに詳しく知るためのページ。

ドラッグ・ドロップの基礎：

ドラッグ＆ドロップ−HTML5のAPI、および、関連仕様
http://www.htmq.com/dnd/

ドラッグ＆ドロップを理解するには、ドラッグ操作とドロップ操作を分けて考えると理解しやすい

ドラッグ操作は要素などのデータをマウスでつかんで引きずるように動かすこと

ドロップ操作はその動かしたデータをドロップ先の要素内に配置すること

Drag and Drop - Drag and Dropのサンプル - HTML5 JavaScript API入門
http://javascript-api.sophia-it.com/r...

ブラウザ外とのデータのやり取りも可能で、ドラッグされたローカルファイルの中身をFile APIを使って参照することもできます。

ドラッグ＆ドロップしよう！(1/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377001

ドラッグするだけなら属性１つ

ドラッグ＆ドロップしよう！(2/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

ドロップ可能にする

ドラッグ＆ドロップしよう！(3/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

ドラッグを受け付ける

ドラッグ＆ドロップしよう！(4/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

ドラッグ＆ドロップでデータを受け渡す処理

ドラッグ＆ドロップしよう！(5/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

ドラッグ＆ドロップでファイルを読み込む

ドラッグ・ドロップの詳細：

詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (7) ドラッグ&ドロップAPI | マイナビニュース
http://news.mynavi.jp/special/2009/ht...

「draggable="true"」という属性値をセットする。これにより、対象の要素がドラッグ可能となる

ちなみに、img要素やa要素(hrefの指定が必要)はデフォルトでドラッグ可能

ドロップを受け付ける要素に対しては、dragoverイベント内で「イベントオブジェクト.preventDefault()」を呼び出す必要がある。

dragoverイベントのデフォルト動作が「ドロップ拒否」になっているため。このデフォルト動作を停止しないと、ドロップを受け付けることができない。

JavaScriptプログラミング講座【ドラッグアンドドロップについて】
http://hakuhin.jp/js/drag_drop.html

デフォルトのドロップについて。エレメントの種類によっては、マウスでドロップ操作を行うと、デフォルトで受け取りが発生。例えば、INPUT 要素にドラッグした場合、文字列の受け取りが発生

javascript - html5 drag/drop e.stopPropagation(); - Stack Overflow
http://stackoverflow.com/questions/20...

ondrop

e.stopPropagation(); // Stops parent elements from receiving event.

e.preventDefault(); // Stops some browsers from redirecting.

ドラッグ・ドロップAPIの使い道について。

「外部ファイルの読み込み」は，Gmailのようなメーラーの添付ファイル作成処理で役立つ。

これをHTAなどに組み込み，WSHのFileSystemObjectと合わせて活用してもよい。

ネイティブ HTML5 ドラッグ＆ドロップ - HTML5 Rocks
http://www.html5rocks.com/ja/tutorial...

DnD を利用する多くのアプリケーションは、DnD を使用しないと操作性がよくありません。

たとえば、チェスゲームの駒

Gmail、ドラッグ＆ドロップでファイル添付可能に -INTERNET Watch
http://internet.watch.impress.co.jp/d...

ファイルを選択し、Gmailのブラウザーウィンドウの上にドラッグしてくると、件名を入力するフィールド付近に「ここにファイルをドロップ」という大きなメッセージが表示される。-そこにファイルをドロップすることで添付できる。

HTML5&CSS&JSでWindows 7やVista向けのアプリを作る方法 » blueskisのブログ
http://blueskis.wktk.so/blog/2012/09/...

HTML5とCSS3でWindowsアプリを開発する方法(9x系~8まで対応)

このHTML5&CSS3&JavaScriptで開発できる技術はHTA

HTML5やCSS3、JSでモバイルアプリ開発やソフト開発が主流になってきている現代、HTAが注目されてもいいはず

よくある，リストをソートするUIは，Drag Drop APIだけでは実現できない。

外部ライブラリを使う。

また，onmouseoverなどの古いAPIのほうが便利な場合もあり，新しいAPIを悪く言う場合もある。

HTML5ドラッグ＆ドロップAPIを利用した超軽量の並び替え用jQueryプラグイン「HTML5 Sortable」 | Chrome Life
http://www.chrome-life.com/html5/5528/

HTML5ドラッグ＆ドロップAPIを利用した超軽量の並び替え用jQueryプラグイン「HTML5 Sortable」は、ネイティブHTML5のドラッグ＆ドロップAPIを使用して構築されているので超軽量です。

本の虫: QuirksBlog: HTML5のドラッグ＆ドロップはNG
http://cpplover.blogspot.jp/2009/09/q...

Web開発者は、HTML5のドラッグ＆ドロップを使うな。絶対使うな。RFC2119で規定されているMUST NOTの意味で使うな。使いたきゃ、従来通りのスクリプトで実装しろ。

File APIについて：

連載：人気順に説明する初めてのHTML5開発：JavaScriptでファイル操作！？ File APIを使いこなそう (1/2) - ＠IT
http://www.atmarkit.co.jp/ait/article...

"ファイル名 :" + f.name + "ファイルの型:" + f.type + "ファイルサイズ:" + f.size / 1000 + " KB "

HTML5のFile APIでローカルファイル情報取得してやんよ!!! | ときどきWEB
http://tokidoki-web.com/2013/08/file-...

'最終更新日時：' + fileVal.lastModifiedDate

File APIによるファイルアクセス(2/4):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=384...

最終修正日はmodifyではなく、lastModifiedDateになっていたりします。

» HTML5 の File API でドラッグ＆ドロップする TECHSCORE BLOG
http://www.techscore.com/blog/2012/11...

fileReader.onload:　event.target.result に読み込んだファイルの内容が入っています.

ドラッグ＆ドロップでファイルアップロードする場合は result の内容を Ajax でサーバに送信しましょう!

y.okano blog: HTML5 ドラッグ&ドロップでファイルをアップロード
http://yokano-jp.blogspot.jp/2013/07/...

イベントオブジェクトの dataTransfer からファイルを取得する FormData を作成してファイルを追加する Ajax でファイルを送信する

ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」 | DesignDevelop
http://design-develop.net/web-design/...

ファイルをローカルから選択してアップロードするというのは直感的ではなく、リテラシーが低い層には障壁にもなりえます

ファイルのアップロードを簡単にしてくれる、ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」というライブラリ

IE8ではHTML5が全く動かないし，Windows XPではIEのバージョンが8までしかインストールできない件について：

HTML5やCSS3にIE8以前の古いブラウザを対応させる方法 : 初心者によるブログの勉強のためのブログ
http://blog.livedoor.jp/kamikaze_cycl...

IE 8は、まったくHTML5のタグには対応しておらず、IE 8やそれより前のバージョンでは、HTML5やCSS3を利用する上では問題となります。

特に、Windows XPは2014年の4月にサポートが切れますが、XPではIEは8までしか使用できません。

CSS3・HTML5の主要ブラウザ対応状況一覧｜ HTML5 – CSS3 mag
http://html5-css3.jp/useful/css3-html...

なお，サンプル中のHTML5では，htmlタグやbodyタグを省略した。

html5:省略できる要素: まじめにWeb制作
http://artmo.cocolog-nifty.com/blog/2...

＜!DOCTYPE html＞＜meta charset="utf-8"＞＜title＞グラデーション＜/title＞