drag & drop example
This is in response for a query on flexcoders by dave. This example demonstrates drag and drop an image from a list to a canvas where the image is added at the position where the mouse is released on the canvas. This also provides the capability to drag and position the dropped images anywhere in the canvas. Making this example I found this rather strange thing, when you are creating a custom dragImage, for an image control, it requires that you call setActualSize() on the dragImage to make it display correctly. surprisingly, thats not the case when the images are embedded, it works fine even without calling setActualSize().
Usage:
Drag and drop from the list of image names to the grey colored area which is a canvas. Observe that the images are drawn at the location where you released the mouse. Drop a few images, now re-position them in the canvas by dragging and dropping them around.
Enjoy!
Download Source (zip)
July 5, 2007 - 4:07 pm
cool example
September 11, 2007 - 6:20 am
It looks a bit smoother if you drop it off at more accurate point. So instead of dropping the image at the mouseX, drop it at mouseX – (dragInitiator.width/2)
This centers the drop a little better. Do this for mouseX and mouseY.
(for mouseY use dragInitiator.height)
September 17, 2007 - 1:27 pm
can you give me the hint for the inverse operation? I need to drag an image over a list, and I can’t find out the row index.
February 21, 2008 - 6:55 am
Thank you very much folk…. Cool Example…
April 20, 2008 - 5:55 pm
Geddesigns comment is incorrect, although his idea is right. I would note that if people are going to post such comments that they should try to be accurate else it throws so many people off. Bad Geddesign! dragInitiator.width and height are the settings for the TileList control. No good! I for example am dragging an image within the TileList control so want the width and height of that image. In my case it is a fixed size so I use that. Furthermore, there is no mouseX and mouseY available for the drag event. There is instead localX and localY attributes. So I used the following which gave me the desired result:
img.x = event.localX – (30/2);
img.y = event.localY – (30/2);
I agree too, cool example!
April 21, 2008 - 1:38 pm
thanks dude
it helped
August 12, 2008 - 5:29 am
But Mark it will work only if you have images of similar dimesnsions otherwise it will not be useful..isn’t it?
So its not the permanent solution dude!
September 3, 2008 - 2:24 pm
Thank you for this great example!
Your “FormattedStepper – NumericStepper with formatting support” is great too!!
Thank you for sharing! =)
October 8, 2008 - 3:05 pm
Looks good, but I’m working with Flex 3, and in order to get the example to work I had to change
dragProxy.setActualSize(event.currentTarget.width,event.currentTarget.height);
to
dragProxy.height=event.currentTarget.height;
dragProxy.width=event.currentTarget.width;