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

Adobe AIR 1.0 およびそれ以降

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

デフォルト動作を使用すると、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() メソッドを呼び出した場合、デフォルトのドラッグ＆ドロップ動作によってデータが追加されることはありません。