Feb 09 2009


Advanced UI component using Rubberband and Drag.Group

I knew after posting Drag.Group I needed to get a demo up quickly. The code is not completely refined yet so use at your own risk. I will be making updates over the next couple of days and will keep you posted.

A while back ago I posted an update to the Rubberband class. Its hard to understand the class unless you actually use it. One of the limitations that I found was the use of draggable elements. The coordinate locations were not updated and as a result the rubberband feature didn’t work.

I have made steps to add this functionality in place, currently the API is a bit broken and I am cleaning up how the coordinates are stored. In the meantime, I am providing a proof of concept.

Enjoy the demo!

Things to try:

  • click and drag outside of any item and drag a rubberband select
  • drag the group of selected items by dragging any selected item
  • try dragging the items into the container boundary and out again
  • shift click works for select items as well
  • The save button works when multiple elements are selected, its a demo of my work in progress on visualized sorting

Several bugs have come to my attention. I am resolving these and will have a much more solid version up soon. The sorting output doesn’t work in IE.

The creative choice of words was supplied by the ever so talented April Magley

Tags: , , , ,

13 Responses to “Advanced UI component using Rubberband and Drag.Group”

  1. Chris says:

    I absolutely love it! It is impressive.

  2. Trevor says:

    Very cool, was actually trying to figure these out together this morning, will wait for you I guess.

  3. Oskar Krawczyk says:

    You, sir, are a genius! *bookmarking*

  4. Daniel Buchner says:

    Looks fantastic! (except in Chrome…where it doesn’t show anything…so that looks somewhat less fantastic, still awesome!)

  5. Thomas Aylott says:

    teh aswome, you haz it

  6. Oskar Krawczyk says:

    I just noticed what happens when you select a few bricks and drag your mouse all the way to the edge of the screen, haha. Awesome.

  7. Alexandre Rocha says:

    Genius work! Impressive!

  8. Drag.Group for Mootools | nwhite.net says:

    [...] Check out the demo. [...]

  9. Visual Sorting DOM elements | nwhite.net says:

    [...] promised I have been cleaning up the code to my most recent demo. I will be releasing a much more polished API along with documentation in the near future. Stay [...]

  10. fabio m. costa says:

    very, very, very, nice.

  11. rpflo says:

    Very nice. Get rid of the words and just put letters… you know, like the refrigerator magnets? And you’ve got the new web game of the year.

    z-index would be nice to keep track of so the most recently clicked hangs out on top.

  12. rpflo says:

    Ha! nevermind, I forgot there were some sets that come in words too, not just letter. (you even gave them the class magnet)

  13. Daniel says:

    I’m viewing it in Chrome and am having no problem. It’s totally awesome, great job Nate!

Leave a Reply