Do the drag with DragManager
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
import mx.core.DragSource;
import mx.containers.Canvas;
import mx.events.DragEvent;
import mx.managers.DragManager;
private function beginDragAndDrop(event:MouseEvent):void {
var canvas:Canvas = Canvas(event.currentTarget);
var dragSource:DragSource = new DragSource( );
var color:uint = canvas.getStyle("backgroundColor");
dragSource.addData(color, "backgroundColor");
var proxy:Canvas = new Canvas( );
proxy.width = 50;
proxy.height = 50;
proxy.setStyle("backgroundColor", color);
DragManager.doDrag(canvas, dragSource, event, proxy);
}
private function dragEnterHandler(event:DragEvent):void {
var target:Canvas = Canvas(event.currentTarget);
var initiator:Canvas = Canvas(event.dragInitiator);
if(target.getStyle("backgroundColor") == initiator.getStyle("backgroundColor")) {
DragManager.acceptDragDrop(target);
}
}
private function dragDropHandler(event:DragEvent):void {
var target:Canvas = Canvas(event.currentTarget);
var initiator:Canvas = Canvas(event.dragInitiator);
if(target.getStyle("backgroundColor") == initiator.getStyle("backgroundColor")) {
vbox.removeChild(initiator);
}
}
</mx:Script>
<mx:HBox width="100%">
<mx:VBox id="vbox" height="100%">
<mx:Canvas width="50" height="50" backgroundColor="#00ff80" mouseDown="beginDragAndDrop(event)" />
</mx:VBox>
<mx:VRule height="213"/>
<mx:HBox id="hbox" height="100%">
<mx:Canvas width="50" height="50" backgroundColor="#00ff80" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />
<mx:Canvas width="50" height="50" backgroundColor="#ff8040" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />
</mx:HBox>
</mx:HBox>
</mx:Application>
Related examples in the same category
