[Flex3.0] Box로 구현한 Drag and Drop

Flex에서는 강력한 UI 중 를 간단한 구현만으로 만들수 있는것 중 하나가 Drag And Drop이다.
일단 모든 drag and drop 기능은 Flex에서 제공하는 모든 컴포넌트가 지원한다.
그중 ListBase나 그를 구현한 컴포넌트들은 몇가지 편리한 기능이 더 구현되어 있다.

예를 들어

DragCanvas.as

package net
{
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.controls.Image;
import mx.core.DragSource;
import mx.managers.DragManager;
public class DragCanvas extends Canvas
{
[Embed(source='1.png')]
public var globeImage:Class;

public function DragCanvas()
{
super();
}

override protected function createChildren():void{
super.createChildren();
this.eventListenerRegister();
}


public function eventListenerRegister():void{
this.addEventListener(MouseEvent.MOUSE_DOWN, mouseHandler, false, 0, true);

}
public function mouseHandler(event:MouseEvent):void{
if(event.type == MouseEvent.MOUSE_DOWN){
this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, false, 0, true);
this.addEventListener(MouseEvent.MOUSE_UP, mouseHandler, false, 0, true);


}else if(event.type == MouseEvent.MOUSE_UP){
this.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
this.removeEventListener(MouseEvent.MOUSE_UP, mouseHandler);
}
}

public function mouseMoveHandler(event:MouseEvent):void{
var dragInitiator:Canvas = Canvas(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "object");
var imageProxy:Image = new Image();
imageProxy.source = globeImage;
imageProxy.height=100;
imageProxy.width=100;
imageProxy.alpha = 0.6;
DragManager.doDrag(dragInitiator, ds, event, imageProxy, 0, 0, 1.00);
}

}
}

------------------------------------------------------------------------------------------------------------------------------
VBoxDragContainer.as

package net
{
import mx.containers.VBox;
import mx.events.DragEvent;
import mx.managers.DragManager;
public class VBoxDragContainer extends VBox
{
public function VBoxDragContainer() {
super();
}
override protected function createChildren():void{
super.createChildren();
this.eventListenerRegister();
}
private function eventListenerRegister():void{
this.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
this.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
}
private function dragEnterHandler(event:DragEvent):void{
var dropTarget:VBoxDragContainer = event.currentTarget as VBoxDragContainer;
if(event.dragSource.hasFormat("object")){
DragManager.acceptDragDrop(dropTarget);
}
}
private function dragDropHandler(event:DragEvent) :void {
var value:DragCanvas = event.dragSource.dataForFormat('object') as DragCanvas;
this.addChild(value);
}
}
}

------------------------------------------------------------------------------------------------------------------------------
application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:container="net.*">
<mx:Script>
 <![CDATA[
  
 ]]>
</mx:Script>
<mx:Style>
 VBoxDragContainer{
  border-style:solid;
  border-thickness:1;
 }
</mx:Style>
 <container:VBoxDragContainer width="110" x="100" id="c1" backgroundColor="0x000000" backgroundAlpha="0.0">
  <container:DragCanvas width="100" height="100" backgroundColor="0xff0000" />
  <container:DragCanvas width="100" height="100" backgroundColor="0xff00ff"/>
  <container:DragCanvas width="100" height="100" backgroundColor="0xffff00"/>
 </container:VBoxDragContainer>
 
 <container:VBoxDragContainer width="110" x="300" height="200" id="c2" backgroundColor="0x000000" backgroundAlpha="0.0" >
  
 </container:VBoxDragContainer>
 
</mx:Application>