Filed under: actionScript, components, contracting, development, flex
Long ago, on a project far far away, I was given the task of recreating in Flex the whole drag n’ drop functionality that was found on iGoogle. And…. I did. Then the code was lost and the classes forgotten.
Well someone had been looking for this functionality on the web and came across an old comment I had left on someone else’s blog. You can read that here. Then they emailed me asked if I had examples. After trudging around a bit I found em. Dusty as they were, they still worked (kinda). But it inspired me to redo the whole shu-bang and make it better.
Its still a work in progress and I have some features in mind to add, but it works solidly, accounting for all sorts of things like padding, alignment, etc for Container classes. Check it out and let me know your thoughts, comments, ideas, criticisms, etc.
dNdLib:
- project home – http://code.google.com/p/flex-drag-n-drop-lib/
- example – download
- src – download or better yet SVN into it
- swc – download
7 Comments so far
Leave a comment
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Hi,
I’m trying to create a similar drag n drop sorting interface in Flash as I’m not familiar with Flex. Could you tell me if the code you have created might be compatible with Flash?
Thanks,
Mark
Comment by Mark Thursday, January 31, 2008 @ 11:41 amThis code would NOT be compatible with just Flash and AS3 as it has some dependencies on the MX framework.
If you haven’t checked out Flex, I highly suggest you download the trial version of Flex Builder 2 (or 3) and give it a go.
I used to be big into Flash development and then Flex came and rocked my world. I haven’t looked back since.
Comment by jwopitz Thursday, January 31, 2008 @ 3:18 pmHi,
I hope I can still comment on this one.
I need drag n drop in my application, but I really need the original object to move with the mouse, not a semi-transparent proxy object. Can this be done in Flex?
I’m trying to create a process modelling app communication with a media server (in my case Red5). The idea is to use the SharedObjects in rtmp so that several participants can model simultaneously, i.e everyone will se how the objects move across the modelling area. Right now I can “move” the objects when I drop them, but that means that for everyone but the person executing the drag, the dragged objects “jumps” to the new location. I have seen this behaviour in a fridge-magnet game on nonoba.com, but I think that that was coded in flash (with a Red5 media server) and not in Flex.
Any hints/help would be appreciated.
I’m really a beginner when it comes to Flex (< 10 hrs). I have developed a process modelling app (sort of) in OpenLaszlo, but there it seems that I can not use SharedObjects so I then turned to Flex to see if I could realize my ideas.
Thanks,
Magnus
Comment by Magnus Saturday, October 4, 2008 @ 9:20 pmHi Magnus.
Yeah you can do actual drag n’ drop in Flex. You would need to have your draggable components inside a Canvas or like class. Each Sprite subclass has the methods startDrag and stopDrag. You would use that instead of something like the data-drag in dndLib or like libs. Hope that helps.
I have an example of actual dragging here – http://jwopitz-lib.googlecode.com/svn/examples/examples/PodApplication.html
right click and view source to see the actual implementation.
Comment by jwopitz Sunday, October 5, 2008 @ 4:17 amThanks for your quick response!
I have a follow up question if you don’t mind …
So, now I can do actual move of the object, but I’m not sure how I can get the other apps to se the move in real time. The object has move=”someFunction()” where the someFunction updates my sharedObject (myRemoteSharedObject.setProperty(“x”,object.x)).
This means updating the position after the move is done. Is there any way to update the sharedObject while I’m moving?
If not, could I animate the move of the objects in the other apps when they get notification from the sharedObject?
Thanks again,
Magnus
Comment by Magnus Sunday, October 5, 2008 @ 10:01 pmYou could do this in a variety of ways. But if you want to update positional information during the drag process I would probably use a timer mechanism that basically gets information off of the moving object and feeds it to the service that updates the other clients.
Comment by jwopitz Sunday, October 5, 2008 @ 10:44 pmCan we do something like adding new links to the widgets? In my case i have a customize widget where user can give his input as siteTitle & sitePath & left nap widget will take both and store it for future use.
Comment by vikrant Thursday, March 19, 2009 @ 3:25 am