Flash Builder 4 -> Drag & Drop

Posted by muchag | Flash Builder 4 |
初回投稿:2010-07-22 (木) 23:51:58 | 最終更新:2010-07-26 (月) 16:25:40

いよいよ HTMLPHP ではできなかったことを実践する日が来た!

Drag & Drop の実装♪

FB4 を始めた最初の目的はこれだったのだ~。

でも、何から手をつけてよいか分からず、グーグル先生にお伺いを立ててみた。

DIASPAR:Drag & Drop – Adobe Flex 版
検索の1位に出てきたこちらサイト。
と~っても参考になった。

そしていつもの如く、ちょこっと弄って練習。

カラータイルを D&D で入れ替えるアプリを作ってみた。

This movie requires Flash Player 9.0.0

 
[mxml]








[/mxml]
import mx.controls.Alert;
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 開発ガイド / ユーザーインターフェイス:ドラッグ&ドロップの使用

Posted by muchag | Flash Builder 4 |
初回投稿:2010-07-22 (木) 23:51:58 | 最終更新:2010-07-26 (月) 16:25:40

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment