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 のドラッグ&ドロップイベントドラッグの開始元であるイニシエータエレメントによって送出されるイベントは次のとおりです。
ドラッグターゲットによって送出されるイベントは次のとおりです。
これらのイベントに応じて送出されたイベントオブジェクトはマウスイベントに似ています。(clientX, clientY) や (screenX, screenY) などのマウスイベントプロパティを使用すると、マウスの位置を確認できます。 ドラッグイベントオブジェクトの最も重要なプロパティは dataTransfer です。このプロパティには、ドラッグ中のデータが含まれています。dataTransfer オブジェクト自体には、次のプロパティとメソッドがあります。
HTML ドラッグ&ドロップの MIME タイプHTML ドラッグアンドドロップイベントの dataTransfer オブジェクトで使用される MIME タイプは次のとおりです。
アプリケーション定義のストリングなど他の MIME ストリングも使用できます。ただし、他のアプリケーションでは、移動されたデータを認識または使用できない場合があります。必要な形式のデータを dataTransfer オブジェクトに追加する作業は、開発者が行う必要があります。 重要: ドロップされたファイルにアクセスできるのは、アプリケーションサンドボックス内で実行されているコードだけです。非アプリケーションのサンドボックス内から File オブジェクトのプロパティの読み取りまたは設定を実行しようとすると、セキュリティエラーが発生します。詳しくは、非アプリケーションの HTML サンドボックスでのファイルドロップの処理を参照してください。
HTML のドラッグ効果dataTransfer.effectAllowed プロパティを dragstart イベントのハンドラーで設定すると、ドラッグジェスチャのイニシエータで許可されるドラッグ効果を制限できます。使用できるストリング値は次のとおりです。
ドラッグジェスチャのターゲットでは、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 を設定します。
|
![]() |