ドラッグ＆ドロップ

ユーザインターフェイスのドラッグ＆ドロップジェスチャをサポートするには、ドラッグ＆ドロップ API のクラスを使用します。ここで言うジェスチャとは、ユーザが情報をコピー、移動、またはリンクするために、オペレーションシステムとアプリケーションの両方を介して行う操作のことです。ドラッグアウトジェスチャは、ユーザがコンポーネントまたはアプリケーションの内部からその外部へオブジェクトをドラッグしたときに発生します。ドラッグインジェスチャは、ユーザがコンポーネントまたはアプリケーションの外部からその内部へオブジェクトをドラッグしたときに発生します。

ドラッグ＆ドロップ API を使用すると、ユーザがアプリケーション間およびアプリケーション内のコンポーネント間でデータをドラッグできるようにすることができます。サポートされている移動形式は次のとおりです。

ビットマップ
ファイル
HTML 形式のテキスト
テキスト
URL

詳細情報

HTML および Ajax 用 Adobe AIR デベロッパーセンター（「AIR ドラッグ＆ドロップ」を検索）

HTML のドラッグ＆ドロップイベント

ドラッグの開始元であるイニシエータエレメントによって送出されるイベントは次のとおりです。

イベント	説明
dragstart	ユーザがドラッグジェスチャを開始したときに送出されます。このイベントのハンドラでは、イベントオブジェクトの preventDefault() メソッドを呼び出すことで、必要に応じてドラッグを防止できます。ドラッグしたデータをコピー、リンク、または移動できるかどうかを制御するには、effectAllowed プロパティを設定します。選択されたテキスト、イメージ、およびリンクは、デフォルト動作によってクリップボードに格納されます。ただし、イベントオブジェクトの dataTransfer プロパティを使用すると、異なるデータをドラッグジェスチャに設定することができます。
drag	ドラッグジェスチャの実行中に継続的に送出されます。
dragend	ユーザがマウスボタンを放してドラッグジェスチャを終了したときに送出されます。

ドラッグターゲットによって送出されるイベントは次のとおりです。

イベント	説明
dragover	ドラッグジェスチャがエレメントの境界内にあるときに継続的に送出されます。このイベントのハンドラでは、dataTransfer.dropEffect プロパティを設定して、ユーザがマウスボタンを放してドロップしたときに実行されるアクション（コピー、移動、またはリンク）を指定する必要があります。
dragenter	ドラッグジェスチャがエレメントの境界内に入ったときに送出されます。 dragenter イベントハンドラで dataTransfer オブジェクトのプロパティを変更した場合、その変更は次の dragover イベントによって直ちに上書きされます。一方、dragenter イベントと最初の dragover イベントとの間には若干の遅延があります。そのため、プロパティを変更した場合、カーソルが点滅することがあります。多くの場合、両方のイベントに同じイベントハンドラを使用できます。
dragleave	ドラッグジェスチャがエレメントの境界から離れたときに送出されます。
drop	ユーザがエレメント上にデータをドロップしたときに送出されます。ドラッグ中のデータには、このイベントのハンドラ内からのみアクセスできます。

これらのイベントに応じて送出されたイベントオブジェクトはマウスイベントに似ています。(clientX, clientY) や (screenX, screenY) などのマウスイベントプロパティを使用すると、マウスの位置を確認できます。

ドラッグイベントオブジェクトの最も重要なプロパティは dataTransfer です。このプロパティには、ドラッグ中のデータが含まれています。dataTransfer オブジェクト自体には、次のプロパティとメソッドがあります。

プロパティまたはメソッド	説明
effectAllowed	ドラッグ元で許可される効果です。通常、この値は、dragstart イベントのハンドラによって設定されます。HTML のドラッグ効果を参照してください。
dropEffect	ターゲットまたはユーザによって選択された効果です。`dropEffect` を `dragover` イベントハンドラまたは `dragenter` イベントハンドラで設定した場合、AIR によって、ユーザがマウスを放したときに生じる効果を示すようにマウスカーソルが更新されます。`dropEffect` の設定が許可された効果のいずれかに一致しない場合、ドロップは許可されず、使用不可カーソルが表示されます。`dropEffect`（最新の `dragover` イベントまたは `dragenter` イベントに応答）を設定していない場合、ユーザは、標準のオペレーティングシステム修飾キーを使用して許可された効果を選択できます。最後の効果は、`dragend` に応じて送出されたオブジェクトの `dropEffect` プロパティによって報告されます。ユーザが有効なターゲットの外部でマウスを放すことでドロップを破棄した場合、`dropEffect` が `none` に設定されます。
types	`dataTransfer` オブジェクトに格納されている各データ形式の MIME タイプのストリングを含む配列です。
getData(mimeType)	`mimeType` パラメータで指定された形式のデータを取得します。 `getData()` メソッドは、`drop` イベントに応じて呼び出すことしかできません。
setData(mimeType)	mimeType パラメータで指定された形式のデータを `dataTransfer` に追加します。複数の形式のデータを追加するには、MIME タイプごとに `setData()` を呼び出します。デフォルトのドラッグ動作によって `dataTransfer` オブジェクトに格納されたデータはすべて消去されます。 `setData()` メソッドは、`dragstart` イベントに応じて呼び出すことしかできません。
clearData(mimeType)	`mimeType` パラメータで指定された形式のデータをすべて消去します。
setDragImage(image, offsetX, offsetY)	カスタムドラッグイメージを設定します。`setDragImage()` メソッドは、dragstart イベントに応じて呼び出すことしかできません。

HTML ドラッグ＆ドロップの MIME タイプ

HTML ドラッグアンドドロップイベントの dataTransfer オブジェクトで使用される MIME タイプは次のとおりです。

データ形式	MIME タイプ
テキスト	"text/plain"
HTML	"text/html"
URL	"text/uri-list"
ビットマップ	"image/x-vnd.adobe.air.bitmap"
ファイルリスト	"application/x-vnd.adobe.air.file-list"

アプリケーション定義のストリングなど他の MIME ストリングも使用できます。ただし、他のアプリケーションでは、移動されたデータを認識または使用できない場合があります。必要な形式のデータを dataTransfer オブジェクトに追加する作業は、開発者が行う必要があります。

重要：ドロップされたファイルにアクセスできるのは、アプリケーションサンドボックス内で実行されているコードだけです。非アプリケーションのサンドボックス内から File オブジェクトのプロパティの読み取りまたは設定を実行しようとすると、セキュリティエラーが発生します。詳しくは、非アプリケーションの HTML サンドボックスでのファイルドロップの処理を参照してください。

HTML のドラッグ効果

dataTransfer.effectAllowed プロパティを dragstart イベントのハンドラで設定すると、ドラッグジェスチャのイニシエータで許可されるドラッグ効果を制限できます。使用できるストリング値は次のとおりです。

ストリング値	説明
"none"	ドラッグ操作は許可されません。
"copy"	ドロップ先にデータがコピーされます。ドラッグ元のデータは変更されません。
"link"	ドラッグ元へのリンクバックを介してドロップ先との間でデータが共有されます。
"move”	ドロップ先にデータがコピーされ、ドラッグ元のデータが削除されます。
"copyLink"	データをコピーまたはリンクすることができます。
"copyMove"	データをコピーまたは移動することができます。
"linkMove"	データをリンクまたは移動することができます。
"all"	データをコピー、移動、またはリンクすることができます。デフォルト動作を使用しない場合は、All がデフォルトの効果になります。

ドラッグジェスチャのターゲットでは、dataTransfer.dropEffect プロパティを設定することで、ユーザがドロップを完了したときに実行されるアクションを指定できます。ドロップ効果が許可されたアクションのいずれかである場合は、該当するコピーカーソル、移動カーソル、またはリンクカーソルが表示されます。許可されたアクションでない場合は、使用不可カーソルが表示されます。ターゲットでドロップ効果が設定されていない場合、ユーザは修飾キーを使用して許可されたアクションを選択できます。

dropEffect の値を dragover イベントと dragenter イベントの両方のハンドラで設定します。

function doDragStart(event) { 
    event.dataTransfer.setData("text/plain","Text to drag"); 
    event.dataTransfer.effectAllowed = "copyMove"; 
} 
 
function doDragOver(event) { 
    event.dataTransfer.dropEffect = "copy"; 
} 
 
function doDragEnter(event) { 
    event.dataTransfer.dropEffect = "copy"; 
}

注意： dropEffect プロパティを dragenter のハンドラで必ず設定する必要がありますが、次の dragover イベントによってこのプロパティがデフォルト値にリセットされることに注意してください。両方のイベントに対応する dropEffect を設定します。

HTML エレメントからのデータのドラッグ

デフォルト動作を使用すると、HTML ページ内の大部分のコンテンツをドラッグでコピーすることができます。CSS プロパティである -webkit-user-select と -webkit-user-drag を使用すると、ドラッグが許可されるコンテンツを制御できます。

dragstart イベントのハンドラでデフォルトのドラッグアウト動作を上書きします。イベントオブジェクトの dataTransfer プロパティの setData() メソッドを呼び出して、ドラッグジェスチャに独自のデータを追加します。

デフォルト動作を使用しない場合にソースオブジェクトでサポートされるドラッグ効果を指定するには、dragstart イベントに応じて送出されたイベントオブジェクトの dataTransfer.effectAllowed プロパティを設定します。任意の組み合わせの効果を選択できます。例えば、ソースエレメントでコピー効果とリンク効果の両方をサポートする場合は、このプロパティを "copyLink" に設定します。

ドラッグされるデータの設定

dragstart イベントのハンドラで、dataTransfer プロパティを使用してドラッグジェスチャのデータを追加します。MIME タイプと移動するデータを dataTransfer.setData() メソッドに渡して、クリップボードにデータを格納します。

例えば、imageOfGeorge という ID を持つイメージエレメントがアプリケーションに含まれている場合は、次のような dragstart イベントハンドラを使用できます。この例では、George の写真を複数のデータ形式で追加しています。これにより、ドラッグされたデータを他のアプリケーションで使用できる可能性が高まります。

function dragStartHandler(event){         
    event.dataTransfer.effectAllowed = "copy"; 
     
    var dragImage = document.getElementById("imageOfGeorge"); 
    var dragFile = new air.File(dragImage.src); 
    event.dataTransfer.setData("text/plain","A picture of George"); 
    event.dataTransfer.setData("image/x-vnd.adobe.air.bitmap", dragImage); 
    event.dataTransfer.setData("application/x-vnd.adobe.air.file-list", 
                                new Array(dragFile)); 
}

注意： dataTransfer オブジェクトの setData() メソッドを呼び出した場合、デフォルトのドラッグ＆ドロップ動作によってデータが追加されることはありません。

HTML エレメントへのデータのドラッグ

デフォルト動作では、ページの編集可能な領域にテキストをドラッグすることしかできません。エレメントの開始タグに contenteditable 属性を追加することで、エレメントとその子が編集可能であることを指定できます。また、ドキュメントオブジェクトの designMode プロパティを "on" に設定することで、ドキュメント全体を編集可能にすることもできます。

ドラッグされたデータを受け入れ可能なエレメントの dragenter イベント、dragover イベント、および drop イベントを処理することで、ページ上での代替的なドラッグイン動作をサポートできます。

ドラッグインの有効化

ドラッグインジェスチャを処理するには、最初にデフォルト動作をキャンセルする必要があります。ドロップターゲットとして使用する HTML エレメントの dragenter イベントと dragover イベントをリッスンします。これらのイベントのハンドラで、送出されたイベントオブジェクトの preventDefault() メソッドを呼び出します。デフォルト動作をキャンセルすると、編集不能な領域にドロップできるようになります。

ドロップされたデータの取得

ドロップされたデータには、ondrop イベントのハンドラからアクセスできます。

function doDrop(event){ 
    droppedText = event.dataTransfer.getData("text/plain"); 
}

読み取るデータ形式の MIME タイプを dataTransfer.getData() メソッドに渡して、クリップボードのデータを読み取ります。dataTransfer オブジェクトの types プロパティを使用すると、使用可能なデータ形式を確認できます。types 配列には、使用可能な各形式の MIME タイプのストリングが含まれています。

dragenter イベントまたは dragover イベントのデフォルト動作をキャンセルする場合は、ドロップされたデータをドキュメント内の適切な場所に挿入する必要があります。マウスの位置をエレメント内の挿入場所に変換する API は存在しません。この制約により、挿入タイプのドラッグジェスチャの実装が困難になります。