Adobe AIR プログラミング講座


ドラッグアンドドロップについて



・ドラッグアンドドロップについて
・データのドラッグを開始する
・ドロップでデータを受け取る

前のページに戻る

　

ドラッグアンドドロップについて

　


■ドラッグアンドドロップについて


Adobe AIR と OS 間で、ドラッグアンドドロップを使って、データをやり取りする事ができます。
　
NativeDragManager クラスと、Clipboard クラスを使用します。
　
■ NativeDragManager クラスについて
　
NativeDragManager クラスは、ドラッグとドロップの処理で使用します。
　
このページでは、主に NativeDragManager クラスの使い方を解説しています。
　
■ Clipboard クラスについて
　
Clipboard クラスは、「データを格納する入れ物」として使用します。
　
クリップボードについては、こちらで解説しています。
　
■ドラッグアンドドロップできるフォーマットについて
　
Adobe AIR にてドラッグアンドドロップできるデータのタイプは、以下の種類があります。
　
・文字列
・ＵＲＬ文字列
・ＨＴＭＬ文字列
・リッチテキストフォーマット
・ファイル操作（複数可）
・ファイルプロミス
・ビットマップ
　
　
上に戻る

　

データのドラッグを開始する

　
サンプルをダウンロード
drag_drop_01_fla09_air1.flaAdobe Flash CS3
　


■ドラッグしたいデータを用意する

　
■Clipboard オブジェクトを作成する
　
new 演算子を使って、Clipboard クラスをインスタンス化します。
　
Clipboard オブジェクトは、任意のデータを格納する入れ物として使用します。
　
空のクリップボードを用意する

import flash.desktop.Clipboard;

// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();
　
■クリップボードにデータを格納する
　
任意のデータを格納するには、setData() メソッドを使用します。
　
setData() メソッドの使い方は、こちらで解説しています。
　
クリップボードに文字列を格納する

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;

// 空のクリップボードを作成
var clipboard : Clipboard = new Clipboard();

// 文字列データを格納する
var str:String = "ドラッグテスト";
clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);
　

■ドラッグを開始する


ドラッグを開始するには、NativeDragManager.doDrag() メソッドを使用します。
　
NativeDragManager.doDrag ( InteractiveObject , Clipboard , BitmapData , Point , NativeDragOptions ) :void
第01引数 InteractiveObjectドラッグ中のイベントを受け取る InteractiveObject を指定します。
第02引数 ClipboardClipboard オブジェクトを指定します。
第03引数(略可)BitmapDataドラッグ中にアイコンを表示したい場合 BitmapData を指定します
第04引数(略可)Point第03引数で指定したビットマップの表示オフセット座標を Point 型で指定します
第05引数(略可)NativeDragOptionsOS に通知するアクションを NativeDragOptions 型で指定します。
戻り値 voidなし
　
■第03引数 BitmapData 型を指定

ドラッグ中にビットマップを表示したい場合は、ここで BitmapData オブジェクトを指定します。
　
Windows XP の場合、視覚効果を切っていると表示されないので、動作確認する場合は注意します。
　
　
■第05引数 NativeDragOptions 型を指定

NativeDragOptions オブジェクトを渡して OS にアクションを通知します。
　
NativeDragOptions クラスには、以下のプロパティがあります。
　
第05引数に null を指定した場合、すべて許可します。

プロパティ名 型 効果
allowCopy Boolean ドラッグしたデータのコピーが可能
allowLink Boolean ドラッグしたデータへのリンクの作成が可能
allowMove Boolean ドラッグしたデータの移動が可能
　
■使用例
　
使用例です。
　
文字列をドラッグする

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.events.MouseEvent;

// ------------------------------------------------------------
// マウスの左ボタンが押されたときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(MouseEvent.MOUSE_DOWN , function (e:MouseEvent):void{

	// 空のクリップボードを作成
	var clipboard : Clipboard = new Clipboard();

	// 文字列データを格納する
	var str:String = "コピーテスト";
	clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);

	// ドラッグを開始
	NativeDragManager.doDrag(stage,clipboard);

});
　
ドラッグ中に、ビットマップを表示する例です。
　
ビットマップデータをドラッグする

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.events.MouseEvent;
import flash.display.BitmapData;
import flash.geom.Point;

// ------------------------------------------------------------
// マウスの左ボタンが押されたときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(MouseEvent.MOUSE_DOWN , function (e:MouseEvent):void{

	// ドラッグ中に表示したいビットマップを作成
	var drag_bmp:BitmapData = new BitmapData(128,128,true,0xFFFF00FF);

	// ビットマップのオフセット位置
	var pos:Point = new Point(-(drag_bmp.width/2),-(drag_bmp.height/2));

	// 空のクリップボードを作成
	var clipboard : Clipboard = new Clipboard();

	// クリップボードにビットマップデータを格納する
	var source_bmp:BitmapData = new BitmapData(256,255,true,0xFF00FF00);
	clipboard.setData(ClipboardFormats.BITMAP_FORMAT , source_bmp);

	// ドラッグを開始
	NativeDragManager.doDrag(stage,clipboard,drag_bmp,pos);

});
　

■マウスの左ボタン押下イベント中に呼び出す


NativeDragManager.doDrag() メソッドは、マウスの左ボタンが押された状況で呼び出す必要があります。
　
MouseEvent.MOUSE_DOWN イベント内で使用します。
　
マウスの左ボタンクリック中に doDrag メソッドを呼び出す

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.events.MouseEvent;

// ------------------------------------------------------------
// マウスの左ボタンが押されたときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(MouseEvent.MOUSE_DOWN,function (e:MouseEvent):void{

	// 空のクリップボードを作成
	var clipboard : Clipboard = new Clipboard();

	// 文字列データを格納する
	var str:String = "コピーテスト";
	clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);

	// ドラッグを開始
	NativeDragManager.doDrag(stage,clipboard);

});
　

■ドラッグ中に呼び出されるイベント


以下のイベントに対応しています。
　
doDrag() メソッドの第01引数で指定した InteractiveObject オブジェクトに、リスナーを登録します。
　
イベント定数 文字列 効果
NativeDragEvent.NATIVE_DRAG_START "nativeDragStart" ドラッグを開始した
NativeDragEvent.NATIVE_DRAG_UPDATE "nativeDragUpdate" ドラッグ中に呼び出される
NativeDragEvent.NATIVE_DRAG_COMPLETE "nativeDragComplete" ドラッグが完了した（成功失敗にかかわらず）
　
ドラッグ時のイベント

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.desktop.NativeDragActions;
import flash.events.MouseEvent;
import flash.events.NativeDragEvent;

// ------------------------------------------------------------
// マウスの左ボタンが押されたときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(MouseEvent.MOUSE_DOWN,function (e:MouseEvent):void{
	// 空のクリップボードを作成
	var clipboard : Clipboard = new Clipboard();

	// 文字列データを格納する
	var str:String = "コピーテスト";
	clipboard.setData(ClipboardFormats.TEXT_FORMAT , str);
	
	// ドラッグを開始
	NativeDragManager.doDrag(stage,clipboard);
});


// ------------------------------------------------------------
// ドラッグが発生したときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(NativeDragEvent.NATIVE_DRAG_START,function (e:NativeDragEvent):void{
	trace("ドラッグを開始した");
});


// ------------------------------------------------------------
// ドラッグ中に呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(NativeDragEvent.NATIVE_DRAG_UPDATE,function (e:NativeDragEvent):void{
	trace("ドラッグ中");
});


// ------------------------------------------------------------
// ドラッグが完了したときに呼び出されるイベント
// ------------------------------------------------------------
stage.addEventListener(NativeDragEvent.NATIVE_DRAG_COMPLETE,function (e:NativeDragEvent):void{

	if(e.dropAction == NativeDragActions.NONE){
		trace("ドラッグが失敗した");
	}else{
		trace("ドラッグが成功した");
	}

});
　

上に戻る

　

ドロップでデータを受け取る

　
サンプルをダウンロード
drag_drop_02_fla09_air1.flaAdobe Flash CS3
　


■ドロップを受け付ける表示オブジェクトを用意する


InteractiveObject クラスを継承している、表示オブジェクトを用意します。
　
Sprite や MovieClip などが該当します。
　
表示オブジェクトに、グラフィックを追加します。
　
グラフィックが、ドロップを受け付ける当たり判定となります。
　
グラフィックが存在しない場合、ドロップ処理は発生しません。
　
ステージ全体をドロップ判定にしたい場合、画面全体を描画しておく必要があります。
　
ドロップの当たり判定用のスプライトを用意する

import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// ドロップの当たり判定用のスプライト
// ------------------------------------------------------------
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();
　

■ドロップされるデータがどんなフォーマットであるか調べる

　
■ドラッグ中のマウスカーソルがドロップ範囲内に侵入したか調べる
　
NativeDragEvent.NATIVE_DRAG_ENTER イベントを使用します。
　
このイベントは、ドラッグ中のマウスカーソルが、ドロップの範囲内に進入したら１度呼び出されます。
　
ドラッグ中のマウスカーソルがドロップ範囲に入ったか調べる

import flash.events.NativeDragEvent;
import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// ドロップの当たり判定用のスプライト
// ------------------------------------------------------------
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(10,10,stage.stageWidth-20,stage.stageHeight-20);
g.endFill();


// ------------------------------------------------------------
// ドラッグ中のマウスカーソルがドロップの範囲内に侵入したときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER , function (e:NativeDragEvent):void{

	trace("ドロップの範囲内に侵入した");

});
　
■クリップボードオブジェクトを取得する
　
登録したコールバック関数の引数から NativeDragEvent オブジェクトが得られます。
　
clipboard プロパティから、Clipboard オブジェクトを取得する事ができます。
　
クリップボードを取得する

import flash.events.NativeDragEvent;
import flash.desktop.Clipboard;
import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// ドロップの当たり判定用のスプライト
// ------------------------------------------------------------
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(10,10,stage.stageWidth-20,stage.stageHeight-20);
g.endFill();


// ------------------------------------------------------------
// ドラッグ中のマウスカーソルがドロップの範囲内に侵入したときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER , function (e:NativeDragEvent):void{

	// クリップボードを取得
	var clipboard : Clipboard = e.clipboard;

	// 出力テスト
	trace(clipboard);

});
　
■クリップボード内のデータのフォーマットを調べる
　
この時点で、クリップボードからデータを取り出す事が可能ですが、中身にはまだアクセスしません。
　
この時点では、どんなデータが格納されているのかという型情報を取得します。
　
型情報を取得するには、formats プロパティを使用します。
　
配列が得られます。中身は、以下の定数が格納されています。
　
定数文字説明
ClipboardFormats.TEXT_FORMAT"air:text"文字列
ClipboardFormats.HTML_FORMAT"air:html"HTML形式 文字列
ClipboardFormats.URL_FORMAT"air:url"URL 文字列
ClipboardFormats.RICH_TEXT_FORMAT"air:rtf"リッチテキストフォーマット(Adobe AIR 1.1 以降)
ClipboardFormats.FILE_LIST_FORMAT"air:file list"ファイルのリスト
ClipboardFormats.BITMAP_FORMAT"air:bitmap"ビットマップイメージ
　
クリップボードに格納されているデータを調べる

import flash.events.NativeDragEvent;
import flash.desktop.Clipboard;
import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// ドロップの当たり判定用のスプライト
// ------------------------------------------------------------
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(10,10,stage.stageWidth-20,stage.stageHeight-20);
g.endFill();


// ------------------------------------------------------------
// ドラッグ中のマウスカーソルがドロップの範囲内に侵入したときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,function (e:NativeDragEvent):void{

	// クリップボードを取得
	var clipboard : Clipboard = e.clipboard;

	// クリップボードのフォーマットを取得する
	var formats:Array = clipboard.formats;

	// 出力テスト
	var i:int;
	var num:int = formats.length;
	for(i=0;i < num;i++){
		trace(formats[i]);
	}
});
　

■ドロップを許可する通知を行う


クリップボードに、取得したいデータのフォーマットが存在するか確認します。
　
確認できた場合、ドロップの受け入れ通知を行います。
　
ドロップの受け入れ通知を行うには、NativeDragManager.acceptDragDrop() メソッドを呼び出します。
　
引数に、ドロップを受け付けるための、表示オブジェクトを指定します。
　
ドロップの受け入れ通知を行うと、アイコンが変化します。
　
NativeDragManager.acceptDragDrop ( InteractiveObject ) :void
第01引数 InteractiveObjectドロップを受け付ける InteractiveObject を指定します。
戻り値 voidなし
　
テキストデータであればドロップを許可する

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.events.NativeDragEvent;
import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// ドロップの当たり判定用のスプライト
// ------------------------------------------------------------
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(10,10,stage.stageWidth-20,stage.stageHeight-20);
g.endFill();


// ------------------------------------------------------------
// ドラッグ中のマウスカーソルがドロップの範囲内に侵入したときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,function (e:NativeDragEvent):void{

	// クリップボードを取得
	var clipboard : Clipboard = e.clipboard;

	// クリップボードのフォーマットを取得する
	var formats:Array = clipboard.formats;

	var i:int;
	var num:int = formats.length;
	for(i=0;i < num;i++){
		// テキストデータが存在するか確認する
		if(formats[i] == ClipboardFormats.TEXT_FORMAT){
			// ドロップの受け入れ通知を行う
			NativeDragManager.acceptDragDrop(sprite);
			break;
		}
	}

});
　

■ドロップされたデータを受け取る


■ドロップの範囲内でマウスボタンが離されたか調べる
　
最後に、NativeDragEvent.NATIVE_DRAG_DROP イベントを使用します。
　
このイベントは、ドロップの範囲内でマウスボタンが離された時に呼び出されます。
　
ドロップの受け入れ通知をしていない場合、イベントは発行されないので注意します。
　
このイベントに登録したコールバック関数内で、クリップボードの中身にアクセスします。
　
■クリップボードからデータを取り出す
　
クリップボードから、データを取り出すには、getData() メソッドを使用します。
　
getData() メソッドの使い方は、こちらで解説しています。
　
ドロップされたテキストデータを受け取る

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.events.NativeDragEvent;
import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// ドロップの当たり判定用のスプライト
// ------------------------------------------------------------
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(10,10,stage.stageWidth-20,stage.stageHeight-20);
g.endFill();


// ------------------------------------------------------------
// ドラッグ中のマウスカーソルがドロップの範囲内に侵入したときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER , function (e:NativeDragEvent):void{
	// クリップボードを取得
	var clipboard : Clipboard = e.clipboard;

	// クリップボードのフォーマットを取得する
	var formats:Array = clipboard.formats;

	var i:int;
	var num:int = formats.length;
	for(i=0;i < num;i++){
		// テキストデータが存在するか確認する
		if(formats[i] == ClipboardFormats.TEXT_FORMAT){
			// ドロップの受け入れ通知を行う
			NativeDragManager.acceptDragDrop(sprite);
			break;
		}
	}
});


// ------------------------------------------------------------
// ドロップの範囲内でマウスボタンが離されたときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,function (e:NativeDragEvent):void{

	// クリップボードを取得
	var clipboard : Clipboard = e.clipboard;

	// クリップボードからテキストデータを取り出す
	var str:String = clipboard.getData(ClipboardFormats.TEXT_FORMAT) as String;

	// 出力テスト
	trace(str);

});
　

■その他のイベント


以下のイベントに対応しています。
　
ドロップ用の InteractiveObject オブジェクトに、リスナーを登録します。
　
イベント定数 文字列 効果
NativeDragEvent.NATIVE_DRAG_OVER "nativeDragOver" ドロップの範囲内に滞在し続けている
NativeDragEvent.NATIVE_DRAG_EXIT "nativeDragExit" ドロップの範囲内から退出した
　
ドロップ時のイベント

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.events.NativeDragEvent;
import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// ドロップの当たり判定用のスプライト
// ------------------------------------------------------------
// スプライトを作成して配置
var sprite : Sprite = new Sprite();
addChild(sprite);

// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(10,10,stage.stageWidth-20,stage.stageHeight-20);
g.endFill();


// ------------------------------------------------------------
// ドラッグ中のマウスカーソルがドロップの範囲内に侵入したときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,function (e:NativeDragEvent):void{

	// ドロップの受け入れ通知を行う
	NativeDragManager.acceptDragDrop(sprite);

	trace("ドロップの範囲内に進入した");
});


// ------------------------------------------------------------
// ドロップの範囲内に滞在し続けていると呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_OVER,function (e:NativeDragEvent):void{
	trace("ドロップの範囲内に滞在し続けている");
});


// ------------------------------------------------------------
// ドロップの範囲内に滞在し続けていると呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT,function (e:NativeDragEvent):void{
	trace("ドロップの範囲内から出た");
});


// ------------------------------------------------------------
// ドロップの範囲内でマウスボタンが離されたときに呼び出されるイベント
// ------------------------------------------------------------
sprite.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,function DragDropFunc(e:NativeDragEvent):void{
	trace("ドロップの範囲内でマウスボタンが離された");
});
　

上に戻る

　
前のページに戻る