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)
cool example
quan
5 Jul 07 at 4:07 pm
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)
Geddesign
11 Sep 07 at 6:20 am
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.
Cosmin
17 Sep 07 at 1:27 pm
Thank you very much folk…. Cool Example…
Swaminathan
21 Feb 08 at 6:55 am
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!
Mark Easton
20 Apr 08 at 5:55 pm
thanks dude
it helped
shekhar
21 Apr 08 at 1:38 pm
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!
amar shukla
12 Aug 08 at 5:29 am
Thank you for this great example!
Your “FormattedStepper – NumericStepper with formatting support” is great too!!
Thank you for sharing! =)
Diseño web
3 Sep 08 at 2:24 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;
Stephen
8 Oct 08 at 3:05 pm