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

Adobe AIR 1.0 およびそれ以降

デフォルト動作では、ページの編集可能な領域にテキストをドラッグすることしかできません。エレメントの開始タグに 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 は存在しません。この制約により、挿入タイプのドラッグジェスチャの実装が困難になります。