Using drag drop with multiple picture inside canvas

[john100]

Hi,

I am using sample code from flex 2. The sample work for one image. But If I have multiple image, I don't know how to get the reference to the selected image

private function doDragDrop(eventragEvent, target1:Canvas, format:String):void
{
//var data:Object = event.dragSource.dataForFormat('img');
//HOW TO GET THE CURRENT SELECTED IMAGE HERE
// myimg.x = target1.mouseX - xOff
// myimg.y = target1.mouseY - yOff
}

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            //Import classes so you don't have to use full names.
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;
            import mx.controls.Image;
            import mx.containers.Canvas;

            //Variables used to hold the image's location
            public var xOff:Number;
            public var yOff:Number;

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

            // Drag initiator event handler, called by             //     the image's mouseMove event.
            private function dragMe(event:MouseEvent, img1:Image,                format:String):void
            {
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(img1, format);                
                // The drag manager uses the image as the drag proxy
                // and sets the alpha to 100 (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, 0, 0, 1.00);
            }
            
            //Function called by the canvas dragEnter event; enables dropping
            private function doDragEnter(event:DragEvent):void
            {
                DragManager.acceptDragDrop(Canvas(event.target));
            }

            // Function called by the canvas dragDrop event; 
            // Sets the image object's position, 
            // "dropping" it in its new location.
            private function doDragDrop(event:DragEvent,                 target1:Canvas, format:String):void
            {
                //var data:Object = event.dragSource.dataForFormat('img');
               //HOW TO GET THE CURRENT SELECTED IMAGE HERE
               // myimg.x = target1.mouseX - xOff
               // myimg.y = target1.mouseY - yOff    
            }

            // Helper function called by the dragged image's mouseMove event,
            // as the image drags across the canvas.
            // The function updates the xOff and yOff variables to show the
            // current mouse location.    
            private function myoffset(img:Image):void {
                xOff = img.mouseX
                yOff = img.mouseY
            }        
        ]]>
    </mx:Script>
    
    <!-- The Canvas is both the drag target --> 
    <mx:Canvas id="v1" width="500" height="500" dragEnter="doDragEnter(event)" 
        dragDrop ="doDragDrop(event, v1, 'img')" borderStyle="solid" 
        backgroundColor="#DDDDDD">
    <!-- The image is the drag initiator and the drag proxy. -->
        <mx:Image id="myimg1" source="@Embed(source='globe.jpg')" 
            mouseMove="dragMe(event, myimg1, 'img');myoffset(myimg1);"/> 
        <mx:Image id="myimg2" source="@Embed(source='globe.jpg')" 
            mouseMove="dragMe(event, myimg2, 'img');myoffset(myimg2);"/> 
        <mx:Image id="myimg3" source="@Embed(source='globe.jpg')" 
            mouseMove="dragMe(event, myimg3, 'img');myoffset(myimg3);"/>                         
    </mx:Canvas>
</mx:Application>

[john100]

I found out the solution after spending one hour reading.

private function doDragDrop(eventragEvent, target1:Canvas, format:String):void
{
var data:Object = event.dragSource.dataForFormat('img');

data.x = target1.mouseX - xOff
data.y = target1.mouseY - yOff
}