How to do find the position of proxy image ,and how to do drag and drop of image using mouse events?

Question

I have two canvases each containing an image .I tried to create their proxy images to drag and drop the images using mouse events .The Proxy image of the mnage in first canvas takes it current target(image present in canvas) x position and works good.But the image in second canvas on mousedown takes its proxy image from the current target x position as the first image x position instead of the second image.

How can i get the second canvas childs x position??


    package
    {
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.geom.Rectangle;

import mx.containers.Canvas;
import mx.containers.HBox;
import mx.controls.Image;

public class Demo extends Canvas
{
    public function Demo()
    {
        super();
        this.setStyle("backgroundColor","blue");
        this.height=400;
        this.width=500;
        this.x=10;
        this.y=10;

        var hb:HBox=new HBox();
        /* hb.width=300;
        hb.height=300; */
        hb.setStyle("borderStyle","Solid");
        hb.setStyle("bordercolor","white");
        this.addChild(hb);
        var  can:Canvas=new Canvas();
        can.width=150;
        can.height=150;
        can.setStyle("backgroundColor","red"); 
        hb.addChild(can);

        var  can1:Canvas=new Canvas();
        can1.width=150;
        can1.height=150;
        can1.setStyle("backgroundColor","yellow"); 
         hb.addChild(can1);

          var img:Image=new Image();
          img.source="Cards/d4.png";
          img.x=60;
          img.y=40;
          can.addChild(img);

          var img1:Image=new Image();
          img1.source="Cards/br.png";
          img1.x=60;
          img1.y=40;
          can1.addChild(img1);
          imagelisteners(img);
          imagelisteners(img1);


    }


    public function imagelisteners(img:Image):void
    {
      img.addEventListener(MouseEvent.MOUSE_DOWN,Image_Mouse_DownHandler);  
      img.addEventListener(MouseEvent.MOUSE_UP,Image_Mouse_UpHandler);
      img.addEventListener(MouseEvent.MOUSE_MOVE,Image_MouseMoveHandler);
    }
    public var imgpoint:Point=new Point();
    public var cloneImage:Image=new Image();
    public var dodrag:Boolean=false;
    public var image:Image;
    public function Image_Mouse_DownHandler(event:MouseEvent):void
        {
            trace("Image_Mouse_DownHandler");
            dodrag=true;
            trace(dodrag);

        }
        public function Image_Mouse_UpHandler(event:MouseEvent):void
        {
            trace("Image_Mouse_UpHandler");
            if(dodrag)
            {
                dodrag=false;

                invalidateDisplayList();

            }           }
    public function Image_MouseMoveHandler(event:MouseEvent):void
    {
        var bounds:flash.geom.Rectangle;
        bounds=null;
                     var image:Image=event.currentTarget as Image;
        imgpoint.x=event.currentTarget.x;
        imgpoint.y=event.currentTarget.y;


        imgpoint=image.localToGlobal(imgpoint);
        trace(imgpoint);

            if(dodrag)
            {
                if(!this.contains(cloneImage))
                {
                cloneImage.source=event.currentTarget.source;
                cloneImage.alpha=0.7;
                cloneImage.x=imgpoint.x;
                cloneImage.y=imgpoint.y;
                        cloneImage.addEventListener(MouseEvent.MOUSE_UP,onmouseup);
                     cloneImage.addEventListener(MouseEvent.MOUSE_MOVE,onmousemove);
                this.addChild(cloneImage);
                bounds=new Rectangle(10,10,500,400);
                cloneImage.startDrag(false,bounds); 
                }
            }


    }
    public function onmouseup(event:MouseEvent):void
    {
        if(this.contains(cloneImage))
        {
        removeChild(cloneImage);
        }

    }
    public function onmousemove(event:MouseEvent):void
    {
        dodrag=false;


    }



   }
    }

Thank you in advance.

Answer 1

When use localToGlobal, try to add the target

    imgpoint.x=event.currentTarget.x;
    imgpoint.y=event.currentTarget.y;

    var image:Image = event.currentTarget as Image;

    imgpoint = image.localToGlobal(imgpoint);//add target here