Flash Builder 4 -> Drag & Drop
いよいよ HTML や PHP ではできなかったことを実践する日が来た！
Drag & Drop の実装♪
FB4 を始めた最初の目的はこれだったのだ～。
でも、何から手をつけてよいか分からず、グーグル先生にお伺いを立ててみた。
DIASPAR：Drag & Drop – Adobe Flex 版
検索の１位に出てきたこちらサイト。
と～っても参考になった。
そしていつもの如く、ちょこっと弄って練習。
カラータイルを D&D で入れ替えるアプリを作ってみた。
[mxml]
import mx.core.DragSource;
import mx.events.*;
import mx.managers.DragManager;
import spark.components.Group;
import spark.components.HGroup;
import spark.components.SkinnableContainer;
private var arrHGroup:Array = new Array();
private var arrMarker:Array = new Array();
// イニシャライズ
private function init():void {
var myColor:Array = new Array(“#ff0000”, “#00ff00”, “#0000ff”, “#ffff00”);
var i:int;
for (i = 0; i < 4; i++) {
// カラータイルとマーカーを載せるコンテナを配置
var myHGroup:HGroup = new HGroup();
myHGroup.id = "myHGroup" + i;
myHGroup.width = 95;
myHGroup.height = 70;
myHGroup.gap = 2;
myHGroup.addEventListener('mouseDown', doDragStart);
myHGroup.addEventListener('dragEnter', doDragEnter);
myHGroup.addEventListener('dragExit', doDragExit);
myHGroup.addEventListener('dragDrop', doDragDrop);
arrHGroup[i] = myHGroup;
myGroup.addElement(myHGroup);
// ヒット判定のマーカーの配置 カラータイルの左側に表示
var myMarker:SkinnableContainer = new SkinnableContainer();
myMarker.id = "myMarker" + i;
myMarker.width = 2;
myMarker.percentHeight = 100;
myMarker.setStyle('backgroundColor', "#333333");
myMarker.setStyle('backgroundAlpha', 0);
arrMarker[i] = myMarker;
myHGroup.addElement(myMarker);
// カラータイルの配置
var myBox:SkinnableContainer = new SkinnableContainer();
myBox.percentWidth = 100;
myBox.percentHeight = 100;
myBox.setStyle('backgroundColor', myColor[i]);
myHGroup.addElement(myBox);
}
}
// ドラッグ開始
private function doDragStart(event:MouseEvent):void {
var dragInitiator:HGroup = HGroup(event.currentTarget);
DragManager.doDrag(dragInitiator, new DragSource(), event);
}
// ドロップゾーンに入った
private function doDragEnter(event:DragEvent):void {
// 相手
var dropzone:HGroup = HGroup(event.currentTarget);
var markerId:int = arrHGroup.indexOf(dropzone);
// 自分
var draggable:HGroup = HGroup(event.dragInitiator);
// マーカーの表示
var ownId:int = arrHGroup.indexOf(draggable);
if (markerId != ownId) {
arrMarker[markerId].setStyle('backgroundAlpha', 1);
}
// ドロップの受け入れ体勢を整える
// この行がないと dragExit, dragDrop イベントが発生しない
DragManager.acceptDragDrop(dropzone);
}
// ドロップゾーンから出た
private function doDragExit(event:DragEvent):void {
var dropzone:HGroup = HGroup(event.currentTarget);
// マーカーの初期化
var markerId:int = arrHGroup.indexOf(dropzone);
arrMarker[markerId].setStyle('backgroundAlpha', 0);
}
// ドロップされた
private function doDragDrop(event:DragEvent):void {
// 相手
var dropzone:HGroup = HGroup(event.currentTarget);
// 自分
var draggable:HGroup = HGroup(event.dragInitiator);
// 相手の Index を取得し、自分の Index へ設定
myGroup.setElementIndex( draggable, myGroup.getElementIndex(dropzone) );
// マーカーの初期化
var markerId:int = arrHGroup.indexOf(dropzone);
arrMarker[markerId].setStyle('backgroundAlpha', 0);
}[/as3onfx4]
ちょっと前に学習した コントロール配列（いまだに ActionScript での呼び方がわからない・・・） も役に立った。
Flash Builder 4 -> コントロール配列
Flash Builder 4 -> DragManager
＜参考サイト＞
Flex 3 開発ガイド / ユーザーインターフェイス：ドラッグ＆ドロップの使用