4 Replies Latest reply on Apr 27, 2009 10:20 AM by Flex harUI

    A question about drag and drop


      I have multiple images which can be dragged and dropped in a canvas. How can I get information about pictures into dataGrid, for instance the name and value (price) of an image? Currently my images are in array like this:


      private function init():void {


      currentExampleImage = imageExampleArray[imgExampleCurrentIndexNumber];



      private var imgExampleCurrentIndexNumber:Number = 0;


      private var imageExampleArray:Array =




      and they are run with loop like this:


      [Bindable] protected function get currentExampleImage():String {
          return _currentExampleImage;
      protected function set currentExampleImage(value:String) : void {
          _currentExampleImage = value;


      private function nextExampleImage(e:MouseEvent):void {
          if(imgExampleCurrentIndexNumber < imageExampleArray.length - 1)
          currentExampleImage = imageExampleArray[imgExampleCurrentIndexNumber];
          imgExampleCurrentIndexNumber = 0;
          currentExampleImage = imageExampleArray[imgExampleCurrentIndexNumber];


      So the question is that how can I set and get the name and the value of an image when it is dropped on a canvas and that information to be shown in a separate datagrid? Should I be using objects or classes? This is the drop function:


      private function doDragDrop(event:DragEvent):void


          var img:Image;
          if (event.dragInitiator.parent == whiteBoard)
              img = event.dragInitiator as Image;    


              img = new Image();
              img.source = (event.dragInitiator as Image).source;

              img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);



                 img.x = event.localX - (event.dragSource.dataForFormat("localX") as Number);

                 img.y = event.localY - (event.dragSource.dataForFormat("localY") as Number)



      Thanks beforehand and feel free to ask more information something is unclear.


      Message was edited by: SerpentChimera

        • 1. Re: A question about drag and drop
          m_hartnett Level 3

          Are you looking to dynamically add a row to a datagrid when an image is dropped onto a canvas.

          If that is the case then add the new item and its data to the datagrids dataProvider.

          • 2. Re: A question about drag and drop
            Gregory Lafrance Level 6

            Well, in theory you could have the image name and/or path in an XML file that also has additional information on the images, such as price, etc.


            You read in that XML and when an image is dragged/dropped onto the canvas, you access the image name/path that was dropped and get the additional info from the XMLListCollection.


            Easy to say, harder to do, but it may generate ideas leading to a solution.

            1 person found this helpful
            • 3. Re: A question about drag and drop
              SerpentChimera Level 1

              There's a separate empty datagrid in my application and the main intention is to make the information of each image (those dragged and dropped onto a canvas that is a designing area) being shown in the datagrid's columns Name - Quantity - Price. Those values should be obtained from each image but I'm currently unaware of the technique how the information could be added to the images.


              For instance Example1.png has a price value of 150€ and when that image is moved onto a canvas, the name and price should be shown in the datagrid and thus there should be simultaneous changes in the Quantity-column when I move the same image onto a canvas many times. Those images can also be removed from the canvas area and then the quantity should decrease. Obviously that same function should work on other images we have in a menu from where the images are dragged and then moved and dropped in the canvas. If I move Example1.png four times there should be Example1 in the name column, 4 in the quantity column and 600€ in the price column and of course all of them in the same row.


              Pay attention to the code I put into the first post. You may suggest better options how I can sort-of-import (couldn't invent better term) images to the application.


              Later there will be a row in the end of the datagrid/chart where the total price of every object that are moved on the canvas should be shown but that's another story.


              Hopefully this made some sense to the whole thing.

              • 4. Re: A question about drag and drop
                Flex harUI Adobe Employee

                Instead of an array of image names, you should have an array of objects that contain the image name, price, quantity.  Then when you drag things, the dataGrid can reflect that object.


                Alex Harui

                Flex SDK Developer

                Adobe Systems Inc.

                Blog: http://blogs.adobe.com/aharui