ドラッグアンドドロップについて
■ドラッグアンドドロップについて
Adobe AIR と OS 間でドラッグアンドドロップでやり取りするためには
NativeDragManager クラスと Clipboard クラスが必要になります。
NativeDragManager クラスは、ドラッグの処理とドロップ処理で使用します。
Clipboard クラスは、「やり取りしたいデータを格納する入れ物」として使用します。クリップボード処理用のクラスなのでクリップボードの習得もできてお得です。
このページでは主に NativeDragManager クラスの使い方を解説しています。
Clipboard クラスについてはこちらで解説しています。
Clipboard クラスは、「やり取りしたいデータを格納する入れ物」として使用します。クリップボード処理用のクラスなのでクリップボードの習得もできてお得です。
Clipboard クラスについてはこちらで解説しています。
Adobe AIR にてドラッグアンドドロップできるデータのタイプは以下の５種類です。
クリップボードにコピーできるタイプ
・文字列
・ＵＲＬ文字列
・ＨＴＭＬ文字列
・ファイル操作（複数可）
・ビットマップ
・ＵＲＬ文字列
・ＨＴＭＬ文字列
・ファイル操作（複数可）
・ビットマップ
データのドラッグを開始する
サンプルをダウンロード
■ドラッグしたいデータを用意する
Clipboard クラスをインスタンス化して空の入れ物を用意します。
空のクリップボードを用意する
import flash.desktop.Clipboard;
// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();
setData() メソッドを使用して好きなデータを格納します。詳しくはこちら。
クリップボードに文字列を格納する
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();
// 文字列データを格納する
var str = "ドラッグテスト";
clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);
■ドラッグを開始する
NativeDragManager.doDrag() メソッドを使用するとドラッグを開始する事ができます。
NativeDragManager.doDrag ( InteractiveObject , Clipboard , BitmapData , Point , NativeDragOptions );
| 第01引数 | ドラッグアンドドロップ中のイベントを受け取る InteractiveObject を指定します。 |
| 第02引数 | Clipboard オブジェクトを指定します。 |
| 第03引数(略可) | ドラッグ中にアイコンを表示したい場合 BitmapData を指定します |
| 第04引数(略可) | 第03引数で指定したビットマップの表示オフセット座標を Point 型で指定します |
| 第05引数(略可) | OS に通知するアクションを NativeDragOptions 型で指定します。 |
| 戻り値 | なし |
■第03引数 BitmapData 型を指定
ドラッグ中にビットマップを表示したい場合は、ここでBitmapData を指定します。
Windows XP の場合、視覚効果を切っていると表示されないので確認する場合は注意してください。
■第05引数 NativeDragOptions 型を指定
NativeDragOptions オブジェクトを渡して OS にアクションを通知します。第05引数に null を指定した場合すべて許可します。
| プロパティ名 | 型 | 効果 |
| allowCopy | Boolean | ドラッグしたデータのコピーが可能 |
| allowLink | Boolean | ドラッグしたデータへのリンクの作成が可能 |
| allowMove | Boolean | ドラッグしたデータの移動が可能 |
使用例です。
文字列をドラッグする
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
// 左マウスボタンが押されたときに呼び出されるイベント
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownFunc);
function MouseDownFunc(e:MouseEvent):void{
// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();
// 文字列データを格納する
var str = "コピーテスト";
clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);
// ドラッグを開始
NativeDragManager.doDrag(stage,clipboard);
}
ドラッグ中にビットマップを表示する例です。
ビットマップデータをドラッグする
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
// 左マウスボタンが押されたときに呼び出されるイベント
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownFunc);
function MouseDownFunc(e:MouseEvent):void{
// ドラッグ中に表示したいビットマップを作成
var drag_bmp = new BitmapData(128,128,true,0xFFFF00FF);
// ビットマップのオフセット位置
var pos = new Point(-(drag_bmp.width/2),-(drag_bmp.height/2));
// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();
// クリップボードにビットマップデータを格納する
var source_bmp = new BitmapData(256,255,true,0xFF00FF00);
clipboard.setData(ClipboardFormats.BITMAP_FORMAT , source_bmp);
// ドラッグを開始
NativeDragManager.doDrag(stage,clipboard,drag_bmp,pos);
}
■マウスイベント中に呼び出す
このメソッドは左マウスボタンがクリックされている状況で呼び出される必要があります。MOUSE_DOWN イベント中などで呼び出します。
左マウスクリック中に doDrag メソッドを呼び出す
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
// 左マウスボタンが押されたときに呼び出されるイベント
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownFunc);
function MouseDownFunc(e:MouseEvent):void{
// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();
// 文字列データを格納する
var str = "コピーテスト";
clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);
// ドラッグを開始
NativeDragManager.doDrag(stage,clipboard);
}
■ドラッグ中に呼び出されるイベント
NATIVE_DRAG_START、NATIVE_DRAG_UPDATE、NATIVE_DRAG_COMPLETE イベントに
対応しています。doDrag() メソッドの第01引数で指定したインスタンスのイベントリスナーに登録します。
ドラッグ時のイベント
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.desktop.NativeDragActions;
// 左マウスボタンが押されたときに呼び出されるイベント
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownFunc);
function MouseDownFunc(e:MouseEvent):void{
// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();
// 文字列データを格納する
var str = "コピーテスト";
clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);
// ドラッグを開始
NativeDragManager.doDrag(stage,clipboard);
};
// ドラッグが発生したときに呼び出されるイベント
stage.addEventListener(NativeDragEvent.NATIVE_DRAG_START,DragStartFunc);
function DragStartFunc(e:NativeDragEvent):void{
trace("ドラッグを開始した");
};
// ドラッグ中に呼び出されるイベント
stage.addEventListener(NativeDragEvent.NATIVE_DRAG_UPDATE,DragUpdateFunc);
function DragUpdateFunc(e:NativeDragEvent):void{
trace("ドラッグ中");
};
// ドラッグが完了したときに呼び出されるイベント
stage.addEventListener(NativeDragEvent.NATIVE_DRAG_COMPLETE,DragCompleteFunc);
function DragCompleteFunc(e:NativeDragEvent):void{
if(e.dropAction==NativeDragActions.NONE){
trace("ドラッグが失敗した");
}else{
trace("ドラッグが成功した");
}
};
ドロップでデータを受け取る
サンプルをダウンロード
■ドロップを受け付けるインスタンスを用意する
なんらかの絵が描かれたインスタンスを用意します。イラストがドロップを受け付ける当たり判定の範囲となります。
絵が無い場合ドロップ処理が発生しないので注意してください。画面全体をドロップ判定にしたい場合に、stage を使いたいところですが
このクラスはドロップを受け付けないようです。
ドロップの当たり判定用のスプライトを用意する
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);
// 矩形を描画
var g : Graphics = sprite.graphics;
g.beginFill (0xFF0000, 1.0);
g.drawRect ( 20, 40 , 360 , 180);
g.endFill ();
■ドロップされるデータがどんなフォーマットであるか調べる
まず、NATIVE_DRAG_ENTER イベントを使用します。このイベントは、ドラッグ中のマウスカーソルがドロップの範囲に入ったら１度呼び出されます。
ドラッグ中のマウスカーソルがドロップ範囲に入ったか調べる
// ドロップ用の絵とドラッグとで当たり判定があったときに呼び出されるイベント
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,DragEnterFunc);
function DragEnterFunc(e:NativeDragEvent):void{
trace("境界内に入った");
};
引数の NativeDragEvent オブジェクトが持つ clipboard プロパティからクリップボードオブジェクトを取得する事ができます。
クリップボードを取得する
// ドロップ用の絵とドラッグとで当たり判定があったときに呼び出されるイベント
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,DragEnterFunc);
function DragEnterFunc(e:NativeDragEvent):void{
// クリップボードを取得
var clipboard : Clipboard = e.clipboard;
trace(clipboard);
};
この時点でクリップボードからデータを取り出す事ができますが、OSの操作としてはまだドラッグ中なので取り出してはいけません。
どんなデータが格納されているのかという型情報だけを取得します。型情報を取得するには、formats プロパティを調べます。
どんなデータが格納されているのかという型情報だけを取得します。型情報を取得するには、formats プロパティを調べます。
| 定数 | 文字 | 説明 |
| ClipboardFormats.TEXT_FORMAT | "air:text" | 文字列 |
| ClipboardFormats.HTML_FORMAT | "air:html" | HTML形式 文字列 |
| ClipboardFormats.URL_FORMAT | "air:url" | URL 文字列 |
| ClipboardFormats.FILE_LIST_FORMAT | "air:file list" | ファイルのリスト |
| ClipboardFormats.BITMAP_FORMAT | "air:bitmap" | ビットマップイメージ |
クリップボードに格納されているデータを調べる
// ドロップ用の絵とドラッグとで当たり判定があったときに呼び出されるイベント
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,DragEnterFunc);
function DragEnterFunc(e:NativeDragEvent):void{
// クリップボードを取得
var clipboard : Clipboard = e.clipboard;
// クリップボードのフォーマットを調べる
trace(clipboard.formats);
};
■ドロップを許可する通知を出す
formats プロパティからそのフォーマットが取得したいデータであった場合、OS に「ドロップを受け付けます」という通知を出します。
ドロップを受け付ける通知を出すには NativeDragManager.acceptDragDrop() メソッドを呼び出します。引数に、ドラッグを受け付けるインスタンスを指定します。
通知すると OS のアイコンが変化します。
テキストデータであればドロップを許可する
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
// ドロップ用の絵とドラッグとで当たり判定があったときに呼び出されるイベント
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,DragEnterFunc);
function DragEnterFunc(e:NativeDragEvent):void{
// クリップボードを取得
var clipboard : Clipboard = e.clipboard;
// クリップボードのフォーマットによって処理を分岐する
switch(String(clipboard.formats)){
case ClipboardFormats.TEXT_FORMAT:
// ドロップを受け付ける
NativeDragManager.acceptDragDrop(sprite);
break;
default:
// ドロップを受け付けない
break;
}
};
■ドロップされたデータを受け取る
最後に、NATIVE_DRAG_DROP イベントを使用します。このイベントは、ドラッグ中のマウスがドロップの範囲内で離された時に１度呼び出されます。
このイベントは、acceptDragDrop() メソッドを使用していない場合実行されないので注意してください。
getData() メソッドを使用するとデータを取得できます。詳しくはこちら。
ドロップされたデータを受け取る
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
// ドロップを受け付ける為のインスタンス
var sprite : Sprite = new Sprite();
addChild(sprite);
var g : Graphics = sprite.graphics;
g.beginFill (0xFF0000, 1.0);
g.drawRect ( 20, 40 , 360 , 180);
g.endFill ();
// ドロップの境界内に入った
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,DragEnterFunc);
function DragEnterFunc(e:NativeDragEvent):void{
var clipboard : Clipboard = e.clipboard;
switch(String(clipboard.formats)){
case ClipboardFormats.TEXT_FORMAT:
// ドロップを受け付ける
NativeDragManager.acceptDragDrop(sprite);
break;
default:
// ドロップを受け付けない
break;
}
};
// ドロップの範囲内で離された
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,DragDropFunc);
function DragDropFunc(e:NativeDragEvent):void{
// クリップボードからデータを取り出す
var clipboard : Clipboard = e.clipboard;
var str = clipboard.getData(ClipboardFormats.TEXT_FORMAT);
trace(str);
};
■その他のイベント
その他のイベントとしては、NATIVE_DRAG_OVER、NATIVE_DRAG_EXIT イベントがあります。
ドロップ時のイベント
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
// ドロップを受け付ける為のインスタンス
var sprite : Sprite = new Sprite();
addChild(sprite);
var g : Graphics = sprite.graphics;
g.beginFill (0xFF0000, 1.0);
g.drawRect ( 20, 40 , 360 , 180);
g.endFill ();
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,DragEnterFunc);
function DragEnterFunc(e:NativeDragEvent):void{
NativeDragManager.acceptDragDrop(sprite);
trace("ドロップの境界内に入った");
};
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_OVER,DragOverFunc);
function DragOverFunc(e:NativeDragEvent):void{
trace("ドロップの範囲内にとどまった");
};
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT,DragExitFunc);
function DragExitFunc(e:NativeDragEvent):void{
trace("ドロップの範囲内から出た");
};
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,DragDropFunc);
function DragDropFunc(e:NativeDragEvent):void{
trace("ドロップの範囲内で離された");
};
問答収集
