1 Reply Latest reply on Jan 7, 2010 6:10 PM by Jason Szeto

    Advanced Drag & Drop with images [dual ways]


      Hi People,

      I'm facing a problem with doing drag and drop of images between 2 canvas.





      The first canvas contains all the images that I have.
      (Imagine a grocery shelf with many pictures of fruits on 1 side)


      I want to be able to drag a copy of the images onto a second canvas

      (So after dragging to the second canvas, the pictures still remain in the 1st canvas, and a copy is displayed in the 2nd canvas)


      Then, I want to be able to drag the copied image from the second canvas and discard it (by dragging into the 1st canvas),
      such that the second canvas becomes empty again.

      (Imagine dragging the fruit out of the basket and throwing it back to the shelf)

      When that copied image is dragged back to the 1st canvas, it simply disappears instead of remaining there.




      I'm now able to drag a copy of the image from the 1st canvas to the 2nd, but i'm unable to 'throw it away' from the second canvas.



          • Able to copy image from canvas A to canvas B through Drag & Drop.
          • Unable to drag item from canvas B and drop it over A such that the image disappears.


      My Codes:


      //This function is called when the user selects
      //an icon and attempts to drags it.

      private function iconDrag (event:MouseEvent, value:uint):void
                          var dragInitiator:Image = event.currentTarget as Image;
                          // Get the drag initiator component from the event object.
                          var dragSource:DragSource = new DragSource();
                          // Create a DragSource object.
                          dragSource.addData(value, 'value');
                          // Add the data to the object.
                          dragSource.addData(dragInitiator, 'img');
                          var dragProxy:Image = new Image();
                          // Create a copy of the icon to use as a drag proxy.
                          dragProxy.width = 50;
                          dragProxy.height = 50;
                          dragProxy.source = event.currentTarget.source;
                          DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
                          // Call the DragManager doDrag() method to start the drag.

      //This function is called when the user drags the image proxy onto the target
      private function dragOver(event:DragEvent):void
                          if (event.dragSource.hasFormat('img'))
                          //The if condition above checks the format if image to determine
                          //if the drag item is acceptable. If yes, "showFeedback(DragManager.COPY)"
                          //creates a green circle with a white plus sign beside the cursor.
                          //if item is prohibited, "showFeedback(DragManager.NONE)" creates
                          //A red circle with a white x beside the cursor.

      private function dragAccept(event:DragEvent):void
                            if (event.dragSource.hasFormat('img'))
                                    var draggedImage:Image = event.dragSource.dataForFormat('img') as Image;
                                    var dropCanvas:Canvas = event.currentTarget as Canvas;
                                    var newImage:Image= new Image();
                                    newImage.source = draggedImage.source;
                                    newImage.x = dropCanvas.mouseX;
                                    newImage.y = dropCanvas.mouseY;
                                    newImage.width = 50;
                                    newImage.height = 50;

      private function dragCompleteHandler(event:DragEvent):void
                          var draggedImage:Image = event.dragInitiator as Image;
                          var dragInitCanvas:Canvas = event.dragInitiator.parent as Canvas;



      Other codes



      <!--rough sample of my image code in mxml-->

      <mx:Image id="gi"
                      x="65.5" y="10"
                      width="50" height="50"
                      mouseMove="iconDrag(event, 2)"


      So I think my problem lies in the dragAccept function, where I created a new image and copied the source of the target image being dragged.

      I tried to modify this function by adding in the lines:

      newImage.mouseMove = "iconDrag(event, 2)";



      But it doesn't seem to work out. I received an error message about undefined property mouseMove and dragComplete.


      Hope that someone will be able to help me out and point me in the right direction, or give me a link to some useful resources.


      Thanks so much in advance!


      -Jord, a 19year old student

        • 1. Re: Advanced Drag & Drop with images [dual ways]
          Jason Szeto Level 3



          For events, you need to listen for them using addEventListener:


          newImage.mouseMove = "iconDrag(event, 2)";



          Should be:


                 addEventListener(MouseEvent.MOUSE_MOVE, iconDrag);
                 addEventListener(DragEvent.DRAG_COMPLETE, dragCompleteHandler2);


          In your dragCompleteHandler2, you'll need to remove the image from its parent. Another point, for your iconDrag, you'll need to use a combintation of mouseDown and mouseMove to initiate the drag. Check out ListBase.mouseDownHandler and mouseMoveHandler for an example.