ドラッグ＆ドロップで要素間でデータを受け渡すには
解説
Drag and Drop APIでは、ドラッグ時に設定したデータを、ドロップ時に受け取ることができます。既定でドラッグ可能な、選択中の文字列、リンク、画像の場合は、イベントハンドラが上書きされなければ、データの格納も自動で行われます。
まず、ドラッグ開始時に受け渡すデータを設定するにはondragstartイベントハンドラで以下のように記述します。ここではドラッグされる要素のidを文字列で格納しています。
// sourceはドラッグされる要素
source.ondragstart = function(event){
event.dataTransfer.setData("Text",event.target.id);
event.dataTransfer.setData("text/plain",event.target.id);
}
受け渡すデータを設定するには、引数のeventオブジェクトのdataTransfer属性に格納されている、DataTransferオブジェクトのメソッド「setData(type,data)」を使用します。
第1引数はデータの種別を識別する文字列です。データ種別には、MIMEタイプに準じた形式の「text/plain」「text/uri-list」「text/html」が使用できます。しかし現在、Drag and Drop APIを実装しているブラウザで共通して使用可能なのは、古い版の規格で定義されていた、「Text」と「URL」だけです。
既定の動作によって自動でデータが格納された場合、選択文字列ではデータ種別「Text」としてその選択文字列が格納されます。リンクでは、データ種別「URL」としてhref属性で設定されたurlが格納されます。画像では、データ種別「Text」としてsrc属性で設定されたurlが格納されます。
実装されているデータ種別は以下の通りです。（現時点での最新のバージョンの状態。未実装のOpera、Windows版でgetData(type)、setData(type,data)の実装が不完全なSafariは除いてあります）
第2引数には受け渡すデータを設定します。データは文字列でなければいけません。DataTransferオブジェクトには、第1引数で設定したデータ種別ごとにデータが格納可能です。すでに存在するデータ種別にデータを設定すると上書きされます。
ドロップ時のデータの読み込みは以下のようにします。
// targetはドロップ先の要素
target.ondrop = function(event){
var id = event.dataTransfer.getData("text/plain");
target.innerHTML = id;
// ドロップ後の既定の処理をキャンセル
event.preventDefault();
}
ドロップイベントの引数として渡されるeventオブジェクトのdataTransfer属性には、DataTransferオブジェクトが格納されており、これはドラッグ開始時のものと同一のデータを参照しています。読み出しにはメソッド「getData(type)」で、データの種別を指定して読み出します。
どのようなデータ種別のデータが格納されているかは、dataTransfer属性のtypes属性にデータ種別の配列として格納されています。ただし、IEはtypes属性に未対応です。
Windows版Safariでは上記の方法は「getData(type)」の実装が完全ではないため機能しません。「setData(type,data)」「getData(type)」を使用せず、ondragstart時にデータを自作のオブジェクトに保持し、ondrop時にそのオブジェクトを参照する方式で実装する必要があります。
関連項目
（関連する項目はありません）
