HTML5のお勉強 第6回 ～Drag & Drop API～

今回はDrag & Drop APIについてご紹介します。
名前の通りブラウザ上でドラッグアンドドロップ操作を可能とするためのAPIとなっています。
HTML5で対応される前から、jQueryUIなどのライブラリを利用することで実現されていましたが、
ブラウザがネイティブに対応したことでより動作の軽いドラッグアンドドロップを実現できます。

今回解説する内容の簡単なデモを用意しました。まずはこちらをご覧ください。

Drag & Drop API デモ
ソースコード


では、順を追って解説します。


◆ 最低限やらないといけないこと
ドラッグアンドドロップを実現するためには、次の4つを必ず行う必要があります。

○ 1.ドラッグ要素の draggable 属性を true にする
　ドラッグしたい要素には draggable=true という属性指定をする必要があります。
　※a および img 要素の場合はデフォルトでドラッグ可能なため必要ありません。
　例えばHTMLを次のように書きます。

　

ドラッグ可能

○ 2.ドラッグ要素の dragstart イベント処理を指定する
　draggable=trueな要素をドラッグすると、
　dragstart というイベントが発生します。
　イベント発生時に次のようなJavaScript処理を行うことで、
　ドラッグ要素のゴーストイメージが表示されるようになります。

　var drag = document.getElementById("drag");
　drag.addEventListener(function(e) {
　　e.dataTransfer.setData("text", "ドロップした際に渡すテキストデータ");
　}, true);

　※e.dataTransfer.setData(format, data)の引数について
　　・format
　　　"text" / "text/html" / "text/plain" のいずれかでデータ形式を指定します。
　　・data
　　　ドロップした際に渡すテキストデータを指定します。

○ 3.ドロップ要素の dragover イベント処理をキャンセルする
　ドラッグしたい要素に draggable=true と指定したように
　ドロップしたい要素にも処理を行う必要があります。
　次のJavaScriptコードのように dragover イベントをキャンセルすることで、
　その要素をドロップ可能な要素にすることができます。

　var drop = document.getElementById("drop");
　drop.addEventListener("dragover", function(e) {
　　e.preventDefault();
　}, true);

○ 4.ドロップ要素の drop イベント処理を指定する
　e.dataTransfer.getDataを呼ぶことで、
　ドラッグ時に setData された文字列を受け取ることができます。
　また、デフォルトでは setData で渡された文字列をリンクとして開こうとします。
　dragover イベントと同じく e.preventDefault() を呼んで
　デフォルト動作をキャンセルする必要があります。

　var drop = document.getElementById("drop");
　drop.addEventListener("drop", function(e) {
　　var text = e.dataTransfer.getData("text");
　　alert(text);
　　e.preventDefault();
　}, true);

　※e.dataTransfer.getData(format)の引数について
　　・format
　　　"text" / "text/html" / "text/plain" のいずれかでデータ形式を指定します。
　　　setData と同じデータ形式を指定する必要があります。


◆ 他にできること
ドラッグアンドドロップを実現する最低限の動作としては
上記4つになりますが、他にもできることがいくつかあります。

☆ ドラッグ中のゴーストイメージを指定する
　最初にお見せしたデモで使用していますが、
　任意のイメージをドラッグ中のゴーストイメージとして
　表示させることができます。

　var drag = document.getElementById("drag");
　drag.addEventListener(function(e) {
　　e.dataTransfer.setData("text", "foobar");
　　var ghost = document.createElement("img");
　　ghost.src = "画像URL";
　　ghost.width = "画像幅";
　　e.dataTransfer.setDragImage(ghost, 画像X座標, 画像Y座標);
　}, true);

　※e.dataTransfer.setDragImage(image, x, y)の引数について
　　・image
　　　ゴーストイメージとして表示させたい要素です。
　　　img 要素である必要はなく、 div 要素などを渡すと、
　　　その要素のゴーストイメージが表示されます。
　　・x, y
　　　ゴーストイメージの座標です。
　　　マウスカーソルを基準としたオフセット指定となります。

　ただし、読み込み中の img 要素を setDragImage に渡すと
　ゴーストイメージが表示されないため注意が必要です。
　ドラッグ処理が始まるよりも前にあらかじめ読み込みを終えている必要があります。

☆ ファイルを読み込む
　通常はローカルファイルの読み込みに input 要素を使用しますが、
　上記3および4で解説したドロップ可能な要素でも同じことができます。
　次のコード例では、ファイルが1つ以上ドロップされたとき、
　最初に認識したファイルの中身をテキストとして読み込みます。

　var drop = document.getElementById("drop");
　drop.addEventListener("drop", function(e) {
　　if (e.dataTransfer.files.length > 0) {
　　　var reader = new FileReader();
　　　reader.addEventListener("load", function(e) {
　　　　drop.innerHTML = e.target.result;
　　　}, true);
　　　reader.readAsText(e.dataTransfer.files[0]);
　　}
　　e.preventDefault();
　}, true);

　input 要素でファイル読み込みを行おうとすると、
　画面上に「[参照...] ファイルが選択されていません。」といった表示になるほか、
　クリックすると自動的にファイル選択ダイアログが表示されます。
　これらの表示・処理をさせたくない場合はここで解説した方法が有効です。


jQuery UI などのライブラリを頼った方が使い勝手は良いかもしれませんが、
軽快な動作を求める場合などは有力な技術だと思います。
ぜひ使ってみてください。

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

ASSE/CORPA
　　センサー、IoT、ビッグデータを活用して新たな価値を創造
　　「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
　　短納期HEMS開発をサポート！

GuruPlug
　　カードサイズ スマートサーバ

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(monipet)、それに農業も手がけるIT企業