0 Replies Latest reply on Aug 9, 2010 11:44 PM by Fis Forums

    Double Click a Image in Canvas after Drag and Dropped

    Fis Forums

      Hi

       

      I have tried out a sample for drag and drop i.e i have a image in a panel and i drag that image to a canvas. now here i have option to move the image with in this canvas to any position and i need to open up a pop up when image with in the canvas is clicked. can any one help me in this issue

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" viewSourceURL="srcview/index.html">
      <mx:Script>
      <![CDATA[
      import mx.managers.PopUpManager;
      import mx.controls.Image
      import mx.core.DragSource;
      import mx.core.UIComponent
      import mx.events.DragEvent
      import mx.managers.DragManager
      import mx.controls.Alert;
      private function doDragEnter(event:DragEvent):void
      {  
      DragManager.acceptDragDrop(UIComponent(event.target));
      }

      private function doDragDrop(event:DragEvent):void
      {
      var img:Image;
      if (event.dragInitiator.parent == dropCanvas){
        img = event.dragInitiator as Image;
      }else{
        img = new Image();
        img.source = (event.dragInitiator as Image).source;
        img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart); 
        img.addEventListener(MouseEvent.DOUBLE_CLICK, ButtonClick);
        dropCanvas.addChild(img);
      }
      img.x = event.localX - (event.dragSource.dataForFormat("localX") as Number);
      img.y = event.localY - (event.dragSource.dataForFormat("localY") as Number);

      }

      private function ButtonClick(event:MouseEvent):void{
          PopUpManager.addPopUp(paneltest,this,true);
         PopUpManager.centerPopUp(paneltest);
         paneltest.visible = true;   
        }
      private function cancelpop():void{
      paneltest.visible = false;
      }
      private function doDragStart(event:MouseEvent):void
      {
      var dragInitiator:Image = event.currentTarget as Image;
      var dragSource:DragSource = new DragSource();
      var dragProxy:Image = new Image();
      dragProxy.source = dragInitiator.source;
      dragProxy.width = dragInitiator.width;
      dragProxy.height= dragInitiator.height;
      dragSource.addData(event.localX, "localX");
      dragSource.addData(event.localY, "localY");
      DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
      }
      ]]>
      </mx:Script>
      <mx:VBox>
        <mx:Image id="img1" source="@Embed('assets/Hawk.jpg')" mouseDown="doDragStart(event)" />
      </mx:VBox>
      <mx:Canvas id="dropCanvas" width="100%" height="100%" borderColor="#1C5CC7" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"  borderStyle="solid" cornerRadius="20" borderThickness="6" backgroundColor="#7E92FC">
        <mx:Panel id="paneltest" x="346" y="106" width="250" height="200" layout="absolute" visible="false">
        <mx:Button id="cancel" click="cancelpop()"/>
        </mx:Panel>
      </mx:Canvas>

      </mx:Application>

      With Regards

      Gopinath.A

      Software Developer

      Chennai.