Drag & Drop API

■ Drag & Drop API

ウェブページ上でマウスを使ってコンテンツをドラッグ＆ドロップするようなページは今では当たり前のように使われています。しかしこのドラッグ＆ドロップの機能はウェブ標準としては定義されていませんでした。

JavaScriptでonmouseup、onmousedown、onmousemoveイベントは実装されているのですが、ドラッグ＆ドロップの機能をウェブアプリケーションに組み込むにはこのイベントに処理を記述し実装する必要がありました。

それでもIEでは以前のバージョンからこのドラッグ＆ドロップの機能を独自で実装していましたが、他ブラウザーが実装することが少なかったためあまり目立たなかった機能といえます。

しかしHTML5では、このドラッグ＆ドロップの機能をウェブ標準として採用し、すでにIE以外のブラウザーでも実装されています。

ドラッグ＆ドロップ機能ではドラッグ元からドラッグ先に選択テキストなどのデータを通知する仕組みがあり、これを『データ転送』と呼び、eventオブジェクトのDataTransferオブジェクトがこの機能の中核となる管理オブジェクトになっている。

サポートブラウザ

ＡＰＩリファレンス

イベント

イベント	説明
ドラッグ要素側で発生
dragstart	ドラッグ要素をドラッグし始めたときに発生します。
drag	マウスボタンを押したまま移動し続けている間にドラッグ要素で連続して発生します。
dragend	ドラッグ中にマウスボタンを離してドラッグが終了したときに発生します。
ドロップ要素側で発生
dragenter	ドラッグ要素がドロップ要素に入ってきたときに発生します。
dragleave	ドラッグ要素がドロップ要素から出て行ったときに発生します。
dragover	ドラッグ要素がドロップ要素上でドラッグで移動している間連続して発生します。
drop	ドラッグ要素がドロップ要素にドロップされたときに発生します。

event.dataTransfer

メソッド	説明	引数			戻り値
setData	ドラッグとドロップで受け渡しするデータを設定します。	1	format	受け渡しするデータのキー ※フォーマット文字列	－
setData	ドラッグとドロップで受け渡しするデータを設定します。	2	data	受け渡しするデータの値
getData	setDataメソッドで設定したデータを取得します。	1	format	転送データのキー ※フォーマット文字列
clearData	データ転送用に設定されたデータを削除します。引数が指定差rている場合、該当するデータのみを削除します。	*1	format	削除対象のデータのキー ※フォーマット文字列	－
setDragImage	ドラッグ中に表示するドラッグアイコン画像を指定します。	1	image	img要素のDOMオブジェクト	－
		2	x	ﾏｳｽﾎﾟｲﾝﾀからの表示位置の相対x座標
		3	y	ﾏｳｽﾎﾟｲﾝﾀからの表示位置の相対y座標
addElement	ドラッグ中に表示する要素を指定します。	1	element	ﾍﾟｰｼﾞ上に表示されている要素	－
プロパティ	説明	引数			値
types	setDataメソッドでセットされたデータ形式を取得します。	－	－	－	string配列
files	ローカルディスク上のファイルがドロップされたときにそのファイルリストを格納したFileListオブジェクトを返します。	－	－	－	FileList
effectAllowed	ドラッグ＆ドロップで許可されている操作を表す文字列を指定する。	－	－	－	※1
dropEffect	ドロップ時に受け入れ可能な操作を表す文字列を返す。	－	－	－	※2

フォーマット文字列

HTML5規格では setData、getDataメソッドの第1引数には任意の文字列が指定できるとなっていますが、
以下の値が指定された場合は特別な意味を持ちます。

定数	説明
text	転送するデータがテキストデータであることを表します。ブラウザー側では「text/plain」として扱われます。
url	転送するデータがURLであることを表します。ブラウザー側では「text/url-list」として扱われます。

effectAllowedプロパティ（※1）

値	説明
copy	選択領域がコピーされることを表す
link	選択領域がドロップ領域にリンクされることを表す
move	選択領域がドロップ領域に移動されることを表す
copyLink	選択領域がコピーまたはリンクされることを表す
copyMove	選択領域がコピーまたは移動されることを表す
linkMove	選択領域がリンクまたは移動されることを表す
all	すべてのドロップ操作が有効であることを表す
none	すべてのドロップ操作が無効であることを表す
uninitialized	effectAllowedプロパティに何も定義されていないことを表す

dropEffectプロパティ（※2）

値	説明
copy	コピーを表すポインターが表示される
link	リンクを表すポインターが表示される
move	移動を表すポインターが表示される
none	ドロップ不可を表すポインターが表示される

使用例【手順1】ドラッグ要素とドロップ要素の定義
【手順2】スクリプト

/* - ドラッグ側の処理 -*/  
        var boxs = document.querySelectorAll(".items>li>a");
        for (var i = 0; i < boxs.length; i++) {
            var box = boxs.item(i);

// ドラッグ対象の要素に対してdragstartイベントを登録
            box.addEventListener("dragstart", function (e) {
                // データ転送用データに要素のIDを指定
                e.dataTransfer.setData("text", e.target.id);
            });
        }

/* - ドロップ側の処理 -*/      
        var dropArea = document.querySelector(".dropArea");
        dropArea.addEventListener("dragenter", function (e) {
            // デフォルトアクションをキャンセル
            if (e.preventDefault) e.preventDefault();
        }, false);

dropArea.addEventListener("dragover", function (e) {
            // デフォルトアクションをキャンセル
            if (e.preventDefault) e.preventDefault();
        }, false);

dropArea.addEventListener("drop", function (e) {
            // デフォルトアクションをキャンセル
            if (e.stopPropagation) e.stopPropagation();
            if (e.preventDefault) e.preventDefault();

// データ転送により送信されたデータを取得
            var id = e.dataTransfer.getData("text");
            // ドロップ要素を取得
            var box = document.getElementById(id);

// li要素に詰めてさらにul要素に追加
            var li = document.createElement("li");
            li.className = "item";
            li.appendChild(box);

dropArea.appendChild(li);
        }, false);

↓↓↓↓↓↓↓↓↓↓↓

ポイント

HTML5規格ではフォーマット文字列は任意の文字列を指定できるとなっているが、現状では上記の2種類しか指定できない。
setDragImage、AddElementメソッドは2011年12月現在、Firefoxのみ対応