explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Simple drag n’ drop for Flex (ala iGoogle)

12 Comments

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:

Advertisements

12 thoughts on “Simple drag n’ drop for Flex (ala iGoogle)

  1. 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

  2. This 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.

  3. Hi,

    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

  4. Hi 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.

  5. Thanks 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

  6. You 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.

  7. Can 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.

  8. HI,I have an Image in aa canvas..because the canvas’s width is lesser than the image length,it is showing only half image..now,i want the drag n drop to be applied on that image in the same container.. how can i do that in flex?

    please please help me as soon as possible..I am very new to flex and ofcourse im a fresher too…

  9. Hey,

    First of all thank you for this awesome function you have created.

    I have a small problem, In your example I would like to replace the colored boxes with panels, this is fine, however I wish to have input text and buttons in said panels, this is also fine except when testing If i click one of the buttons or try to input text I get this error

    TypeError: Error #1034: Type Coercion failed: cannot convert mx.containers::Panel@18afae1 to dNdLib.containers.IDnDContainer.
    at dNdLib.managers::DnDManager/doDrag()[C:\Documents and Settings\User\My Documents\Flex Builder 3\Test\src\dNdLib\managers\DnDManager.as:75]
    at DnDtestagain/___DnDtestagain_Panel2_mouseDown()[C:\Documents and Settings\User\My Documents\Flex Builder 3\Test\src\DnDtestagain.mxml:16]

    sorry but I just know not what I am doing wrong 😦 any help would be greatly appreciated, or perhaps you know another way to Drag,Drop sort a list of panels?

    Thanks again
    Seth

    • Seth, you’d need to extend the mx.containers.Panel and have your subclass implement dNdLib.containers.IDnDContainer. This is assuming that the Panels are serving as the organizing containers for any draggable content.

  10. Thanks a bunch, appreciate the help.

  11. Great site–thanks for sharing.

    My question is this (after hours of research, ugh!):

    how do I get rid of the zoom that happens on the drop? There’s no explicit property like DropEffect=”off”

    I’m thinking (will try) that I have to add my own zoom effect and set it to 0. Any clues?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s