Canvas drag and drop by using DragManager
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;
private function mouseDownHandler( evt:MouseEvent ):void
{
var initiator:Box = evt.currentTarget as Box;
var boxData:Object = new Object();
boxData.width = 30;
boxData.height= 40;
boxData.backgroundColor = "Red";
var dragSource:DragSource = new DragSource();
dragSource.addData( boxData, "box" );
DragManager.doDrag( initiator, dragSource, evt );
}
private function dragEnterHandler( evt:DragEvent ):void
{
if( evt.dragSource.hasFormat( "box" ) )
{
DragManager.acceptDragDrop( Canvas( evt.currentTarget ) );
}
}
private function dropHandler( evt:DragEvent ):void
{
var boxData:Object = evt.dragSource.dataForFormat( "box" );
var box:Box = new Box();
box.width = 40;
box.height = 30;
box.setStyle( "backgroundColor", "Yellow");
box.x = evt.localX;
box.y = evt.localY;
canvas.addChild( box );
}
</mx:Script>
<mx:Canvas id="canvas" backgroundColor="0x0000FF" width="300" height="300"
dragEnter="dragEnterHandler(event);"
dragDrop="dropHandler(event);">
<mx:Box id="dragItem" width="20" height="20" backgroundColor="0x00FF00"
mouseDown="mouseDownHandler(event);"/>
</mx:Canvas>
</mx:Application>
Related examples in the same category
