2 Replies Latest reply on Feb 15, 2010 9:45 PM by Sherwette.Mansour

    Drag and Drop image is Duplicated

    Sherwette.Mansour

      Hi,

       

      In my code, I want to drag and drop an image from a list populated from a folder, and its information is populated from an xml file. Now, I can drag the image from the list and drop it in the container, However, when now, I want to drag around the dropped image, it is duplicated, an extra image is created in the canvas. So, if anyone can tell me how not to create an extra copy of the image in the new container (canvas) that it was dragged to.

       

      Here is the code:

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

      name="Drag and Drop Tutorial"

      creationComplete="init()"

      initialize="pictureService.send()">

       

      <mx:Script>

      <![CDATA[

      import mx.controls.Image;

      import mx.core.DragSource;

          import mx.core.IUIComponent;

          import mx.managers.DragManager;

          import mx.events.DragEvent;

          import mx.controls.Alert;

        

          import mx.rpc.events.FaultEvent;

      import mx.rpc.events.ResultEvent;

      import mx.collections.ArrayCollection;

       

      [Bindable] private var pictureData:ArrayCollection;

                  private function resultHandler(event:ResultEvent):void{

                  pictureData = event.result.data.image;

                  }

                  private function faultHandler(event:FaultEvent):void{

                  //code

                  }

       

      public function init():void

               {

                  // a mouseDown event will start the drag

              

            list.dataProvider = pictureData;

           

            //picture in the list is being dragged

             this.picture.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );

           // accepting a drag/drop operation...

             this.area.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );

             // handling the drop...

            this.area.addEventListener( DragEvent.DRAG_DROP, handleDrop );

               }

              

               public function beginDrag( mouseEvent:MouseEvent ):void

      {

            // the drag initiator is the object being dragged (target of the mouse event)

             var dragInitiator:IUIComponent = mouseEvent.currentTarget as IUIComponent;

           

             // the drag source contains data about what's being dragged

             var dragSource:DragSource = new DragSource();

           

             // Add the data to the object.


                     dragSource.addData(1, 'value');

                   

                      // Create a copy of the coin image to use as a drag proxy.

                      var dragProxy:Image = new Image();

                      dragProxy.source = mouseEvent.currentTarget.source;

                      dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget.height)

           

           // ask the DragManger to begin the drag

           DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy ); 

      }

       

      public function acceptDrop( dragEvent:DragEvent ):void

         {

             var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;   

            // accept the drop

         DragManager.acceptDragDrop( dropTarget );

        // show feedback

              DragManager.showFeedback( DragManager.COPY );       

         }

        

           public function handleDrop( dragEvent:DragEvent ):void

         {

            var dragInitiator:IUIComponent = dragEvent.dragInitiator;

            var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;

           

              if(dragEvent.dragSource.hasFormat("items"))

        {

                var items:Array = dragEvent.dragSource.dataForFormat("items") as Array;

              var img:Image = new Image();

              img.x=dragEvent.localX;

              img.y=dragEvent.localY;

              img.width = 50;

              img.height=50;

              img.source="assets/" + items[0].id + ".jpg";

              img.addEventListener(MouseEvent.MOUSE_MOVE,beginDrag);

             

              area.addChild(img);

         }

         else

         {

         dragEvent.dragInitiator.x=dragEvent.localX

         dragEvent.dragInitiator.y=dragEvent.localY

         }

             

         }

        

      ]]>

      </mx:Script>

       

       

        

         <mx:HTTPService id="pictureService"

      url="data/data.xml"

      result="resultHandler(event)"

      fault="faultHandler(event)"/>

       

      <mx:DataGrid id="list" width="238" height="200" y="26" x="10" labelField="src" dragEnabled="true"

      dataProvider="{pictureData}">

        <mx:columns>

       

        <mx:DataGridColumn dataField="id" id="code">

       

        </mx:DataGridColumn>

        <mx:DataGridColumn id="picture" draggable="true" >

        <mx:itemRenderer>

        <mx:Component>

        <mx:Image source="assets/{data.id}.jpg"  />  

        </mx:Component>

        </mx:itemRenderer>

        </mx:DataGridColumn>


      </mx:columns>

      </mx:DataGrid>

      <mx:Canvas id="area" x="266" y="28" width="436" height="401" backgroundColor="#c0c0c0"

      dragDrop="handleDrop(event)" >

      </mx:Canvas>

       

      </mx:Application>