Ordering lists, UI example

jQuery is definitely my javascript library of choice.

Easy to use and you can spit out awesome stuff pretty quickly and easily.

My latest conquest is drag and drop ordering. Basically what I wanted to do was have two lists. Then you can drag options from one list to the other, and order items within each list.

Here’s a demo of the drag and drop functionality in action

Originally I built this to use in a WordPress plugin I was writing. The point would be to give users some options and let them order the options they selected.

The nice part of this is what goes on behind the scenes. When a user moves an item around (either from one list to the other, or within the list itself to reorder things) the code fires off an ajax call and stores/updates the list in a database.

This is the pretty basic instance of this functionality though. The plugin comes with a lot of options that you can use to really customize the user experience.

Some other options you have is triggering an event (an alert, popup, changing colors on something, etc.) when a person selects an item, when they drop the item, when they put one item above or below another item (before or after they drop it there, warnings anyone?). It’s a nice way to give a lot of feedback to the user as they are interacting with the page and the lists.

And the effects don’t have to stop there. By re-ordering a list on one part of the page could effect layout or content or any other number of things on a page.