How can I drag a copied object around a canvas?

I am able to drag a copy of an object and drop it on the canvas, using drag-drop manager functi开发者_如何学Conality in Flex.

The original object remains unchanged and a new copy of the object is created. However, If i further want to drag this copy and position it differently on the canvas, I find that the object is not draggable.

Since this copy is created at runtime, I am not sure how I can achieve to drag it?

My code is given below.

Any suggestions will help.

<mx:Script>
    <![CDATA[
        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.events.DragEvent;
        import flash.events.MouseEvent;

        // Embed icon image.
        [Embed(source='car.png')]
        public var globeImage:Class;

        // The mouseMove event handler for the Image control
        // functioning as the drag initiator.
        private function mouseOverHandler(event:MouseEvent):void 
        {                
            var dragInitiator:Image=Image(event.currentTarget);
            var ds:DragSource = new DragSource();
            ds.addData(dragInitiator, "img");               

            // The drag manager uses the image as the drag proxy
            // and sets the alpha to 1.0 (opaque),
            // so it appears to be dragged across the canvas.
            var imageProxy:Image = new Image();
            imageProxy.source = globeImage;
            imageProxy.height=10;
            imageProxy.width=10;                
            DragManager.doDrag(dragInitiator, ds, event, 
                imageProxy, -15, -15, 1.00);
        }

        // The dragEnter event handler for the Canvas container
        // functioning as the drop target.
        private function dragEnterHandler(event:DragEvent):void {
            if (event.dragSource.hasFormat("img"))
                DragManager.acceptDragDrop(Canvas(event.currentTarget));
        }

        // The dragOver event handler for the Canvas container
        // sets the type of drag-and-drop
        // operation as either copy or move. 
        // This information is then used in the 
        // dragComplete event handler for the source Canvas container.
        private function dragOverHandler(event:DragEvent):void
        {

            DragManager.showFeedback(DragManager.COPY);
                                                }

        // The dragDrop event handler for the Canvas container
        // sets the Image control's position by 
        // "dropping" it in its new location.
        private function dragDropHandler(event:DragEvent):void {
            if (event.dragSource.hasFormat("img")) {
                var draggedImage:Image = 
                    event.dragSource.dataForFormat('img') as Image;
                var dropCanvas:Canvas = event.currentTarget as Canvas;

                // Since this is a copy, create a new object to 
                // add to the drop target.
                var newImage:Image=new Image();
                newImage.source = draggedImage.source;
                newImage.x = dropCanvas.mouseX;
                newImage.y = dropCanvas.mouseY;
                dropCanvas.addChild(newImage);
            }
        }

        // The dragComplete event handler for the source Canvas container
        // determines if this was a copy or move.
        // If a move, remove the dragged image from the Canvas.
        private function dragCompleteHandler(event:DragEvent):void {
            var draggedImage:Image = 
                event.dragInitiator as Image;
            var dragInitCanvas:Canvas = 
                event.dragInitiator.parent as Canvas;

            if (event.action == DragManager.MOVE)
                dragInitCanvas.removeChild(draggedImage);
        }            
    ]]>
</mx:Script>

<!-- Canvas holding the Image control that is the drag initiator. --> 
<mx:Canvas 
    width="250" height="500"  
    borderStyle="solid" 
    backgroundColor="#DDDDDD">

    <!-- The Image control is the drag initiator and the drag proxy. -->
    <mx:Image id="myimg" 
              source="@Embed(source='car.png')" 
              mouseMove="mouseOverHandler(event);"
              dragComplete="dragCompleteHandler(event);"/> 
</mx:Canvas>

<!-- This Canvas is the drop target. --> 
<mx:Canvas
    width="250" height="500"  
    borderStyle="solid" 
    backgroundColor="#DDDDDD"
    dragEnter="dragEnterHandler(event);" 
    dragOver="dragOverHandler(event);"
    dragDrop="dragDropHandler(event);">        
</mx:Canvas>

---

Change the dragDropHandler method to:

private function dragDropHandler(event:DragEvent):void {
    if (event.dragSource.hasFormat("img")) {
        var draggedImage:Image = 
            event.dragSource.dataForFormat('img') as Image;
        var dropCanvas:Canvas = event.currentTarget as Canvas;

        // Since this is a copy, create a new object to 
        // add to the drop target.
        var newImage:Image=new Image();
        newImage.source = draggedImage.source;
        newImage.x = dropCanvas.mouseX;
        newImage.y = dropCanvas.mouseY;
        newImage.addEventListener(MouseEvent.MOUSE_MOVE, mouseOverHandler);
        newImage.addEventListener(DragEvent.DRAG_COMPLETE, dragCompleteHandler);
        dropCanvas.addChild(newImage);
    }
}