|
HTML ベースのアプリケーション（または HTMLLoader に表示される HTML）の内部または外部にデータをドラッグするには、HTML ドラッグ＆ドロップイベントを使用します。HTML ドラッグ＆ドロップ API を使用すると、HTML コンテンツ内の DOM エレメントに、または DOM エレメントからドラッグできます。
デフォルトのドラッグ＆ドロップ動作
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
を設定します。
|
|
|
