クリック時は画像選択、ドラッグ＆ドロップ時は画像の入れ替え処理という風に制御します。
ドラッグ＆ドロップはPCではふつーの処理なんだけど、PC上でマウス使ってやるようにAndroidでは指を使ってやると同じようには行かない！？
たとえば、ドラッグを開始するのをマウスDOWN時やMOVE時にやってたらCLICKとの使い分けが出来なくなったり、MOVEイベントのリスナーがあるオブジェクトの上を通るときにまた処理が行われたり。
でもイベントがどんな風に送出されるかを理解してたら、PCでもAndroidでもわざわざマウスイベントとタッチイベントで使い分けなくてもマウスイベントでうまく処理が出来たよ。
ちなみにタッチイベントでもなんとなく出来るんだけど、ドラッグ中の画像が移動している状態の表示とかがうまくいかない。
私がこの辺理解してないからなんだろうけど、みんなどうしてんのかな？
Andoroidではドラッグ＆ドロップがタブーとして行われてないのか・・・？
しかーし、マウスイベントを使うと、DragManagerのdoDragメソッドでドラッグ中の画像処理からDropした後の処理まで自動でやってくれちゃうのです。
だから今回はマウスイベントにこだわったのだ。
作成の手順としては
１．画像をおくオブジェクトを設置
２．オブジェクトにリスナー作成（initなどで）
３．リスナーがイベントを受けて実行するメソッド作成
というだけ、とってもシンプル！
１．今回作ったオブジェクトはGroupに囲われたBitmapImageです。
Groupはspark.componentsに
BitmapImageの方はspark.primitivesにあります。
それぞれにIDでimgGroup1、img1という風に同じ番号を振りました。
２．まずはイベントリスナーがいるよ！
mxmlを読み込んだときに処理してくれるinitなどで、イベントを受けるオブジェクトにリスナーを作成します。
リスナーはイベントの受け口みたいなもの。
clickとかだと、タグの中にイベントを直に書いたりもするけど、今回はイベントの動作を制御したいのでリスナーを作るよー。
ちなみにリスナーはBitmapImageオブジェクトじゃなくてGroupの方に設定。
imgGroup1.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
imgGroup1.addEventListener(DragEvent.DRAG_ENTER, onEnter);
imgGroup1.addEventListener(DragEvent.DRAG_DROP, onDrop);
：
※オブジェクト分だけ作る
３．マウスダウンしたときのメソッドを作る
リスナーがMOUSE_DOWNイベント受け取ったら実行するメソッドを作成します。
メソッドでは以下のような処理を行う。
①イベントを受け取ったオブジェクトのid番号を取得。
※あらかじめメソッド間で共有できる変数を宣言して置いてください。
②次にくるイベントのリスナーを作成。
ドラッグを始めるためのROLL_OUTのリスナーと
クリック処理の場合のCLICKのリスナーを作ります。
オブジェクトの参照はthis['オブジェクトのID番号なし'＋イベントを受け取ったオブジェクトのID番号]で参照可能。
public function onDown(e:MouseEvent):void {
idDragPoint = String(e.currentTarget.id).substr(-1);
this['imgGroup'+idDragPoint].addEventListener(MouseEvent.ROLL_OUT, onDrag);
this['imgGroup'+idDragPoint].addEventListener(MouseEvent.CLICK, imgClick);
}
４．ドラッグを開始するメソッドを作る
３のマウスダウンした後に受け取るイベントで、ドラッグを開始するためのメソッドを作成します。
public function onDrag(e:MouseEvent):void {
//ドラッグを開始するコンポーネントを設定
var dragInitiator:Group = Group(e.currentTarget);
//ドラッグを開始
DragManager.doDrag(dragInitiator, new DragSource(), e);
//ROLL_OUTのリスナーを削除
this['imgC'+drag_drop_local].removeEventListener(MouseEvent.ROLL_OUT, onDrag);
}
５．ドラッグを受け取る体制にする。
４でドラッグが開始され、ドラッグのイベントが送出されます。
つまり、ドラッグしていく先にそれを受け取るコンポーネントがあるはずで、そのコンポーネント上でドラッグイベントを受け取るリスナーが待ち構えてます。
ドラッグイベントのDRAG_ENTERを受け取ったとき、次にくるDRAG_DROPを受け入れることが出来る状態にするメソッドです。
これにより、ドラッグ＆ドロップができるコンポーネントを限定することが出来ます。
public function onEnter(e:DragEvent):void {
if (e.currentTarget is Group) {
DragManager.acceptDragDrop(IUIComponent(e.target));
}
}
６．ドロップされたとき、画像を入れ替えるメソッドを呼び出し
ドラッグイベントのDRAG_DROPを受け取って、画像を入れ替える処理を実行します。
public function onDrop(e:DragEvent):void {
//画像を入れ替えるメソッドを呼び出し
changeImageBox(idDragPoint, String(e.currentTarget.id).substr(-1));
}
７．あとはクリックしたときに画像を選ぶメソッドと、画像を入れ替えるメソッドを作成すれば、それぞれの処理がクリック時、ドラッグ＆ドロップ時に正しく実行されます。