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(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
}


<?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
}