HTML でのドラッグ&ドロップ

Adobe AIR 1.0 およびそれ以降

HTML ベースのアプリケーション(または HTMLLoader に表示される HTML)の内部または外部にデータをドラッグするには、HTML ドラッグ&ドロップイベントを使用します。HTML ドラッグ&ドロップ API を使用すると、HTML コンテンツ内の DOM エレメントに、または DOM エレメントからドラッグできます。

注意: また、HTML コンテンツを含む HTMLLoader オブジェクトのイベントをリッスンすることで、AIR NativeDragEvent および NativeDragManager API を使用することもできます。ただし、HTML DOM とより密接に統合されているのは HTML API です。HTML API を使用すると、デフォルト動作を制御できます。

デフォルトのドラッグ&ドロップ動作

HTML 環境では、テキスト、イメージ、および URL に関連するドラッグ&ドロップ操作のデフォルト動作を使用できます。デフォルト動作を使用する場合、常にこれらの種類のデータをエレメントからドラッグできます。ただし、エレメントにドラッグできるのはテキストだけです。また、ページの編集可能な領域内のエレメントにしかドラッグできません。ページの編集可能な領域間または領域内でテキストをドラッグすると、デフォルト動作によって移動アクションが実行されます。編集不能な領域またはアプリケーションの外部から編集可能な領域にテキストをドラッグすると、デフォルト動作によってコピーアクションが実行されます。

デフォルト動作を上書きするには、ドラッグ&ドロップイベントを独自に処理します。デフォルト動作をキャンセルするには、ドラッグ&ドロップイベントに応じて送出されたオブジェクトの preventDefault() メソッドを呼び出す必要があります。その後、必要に応じてドロップターゲットへのデータの挿入とドラッグ元からのデータの削除を行ってから、選択したアクションを実行することができます。

デフォルトでは、ユーザーは任意のテキストを選択してドラッグしたり、イメージおよびリンクをドラッグしたりできます。WebKit CSS プロパティである -webkit-user-select を使用すると、HTML エレメントの選択方法を制御できます。例えば、 -webkit-user-select none に設定すると、エレメントのコンテンツを選択できなくなります。そのため、ドラッグすることもできません。また、 -webkit-user-drag CSS プロパティを使用すると、エレメントをまとめてドラッグできるかどうかを制御できます。ただし、エレメントのコンテンツは個別に扱われます。この場合でも、ユーザーは選択したテキスト部分をドラッグできます。詳しくは、 AIR での CSS を参照してください。

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 イベントに応じてのみ、および -webkit-user-drag CSS スタイルを element に設定することで HTML エレメント全体をドラッグする場合にのみ、呼び出すことができます。 image パラメーターとしては、JavaScript エレメントまたは Image オブジェクトを指定できます。

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 を設定します。