flex 拖拽，指定拖拽代理，由一个容器拖放到另一个里

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;
private var xoffset:Number;
private var yoffset:Number;
private static const FORMAT:String = "box" ;
private function mouseDownHandler(evt:MouseEvent ):void {
xoffset = evt.localX;
yoffset = evt.localY;
var initiator:Box = evt.currentTarget as Box;
var proxyBox:BitmapAsset = new BitmapAsset();
proxyBox.bitmapData = new BitmapData(initiator.width,initiator.height );
proxyBox.bitmapData.draw( initiator );
var dragSource:DragSource = new DragSource();
dragSource.addData( initiator, FORMAT );
DragManager.doDrag( initiator, dragSource, evt,proxyBox, 0, 0, 0.5 );
}
private function dragEnterHandler( evt:DragEvent ):void {
if ( evt.dragSource.hasFormat( FORMAT ) ) {
DragManager.acceptDragDrop(Canvas(evt.currentTarget));
}
}
private function dropHandler( evt:DragEvent ):void {
 trace(evt.target);
var box:Box = Box( evt.dragInitiator );
box.x = evt.localX - xoffset;
box.y = evt.localY - yoffset;
this.canvas0.addChild(box);
}
]]>
</mx:Script>
<mx:Canvas id="canvas" backgroundColor="0xEEEEEE" width="300" height="300"
dragEnter="dragEnterHandler(event);" >
<mx:Box id="dragItem" width="52" height="31" backgroundColor="0x00FFCC" mouseDown="mouseDownHandler(event);"  x="49" y="45"/>
</mx:Canvas>
 <mx:Canvas id="canvas0" backgroundColor="0xEEEEEE" width="300" height="300"
 dragEnter="dragEnterHandler(event);" dragDrop="dropHandler(event);">
 </mx:Canvas>
</mx:Application>