Working with Related Sortable Lists in jQuery UI

The next in my continuing series of jQuery tutorials works again with the that is a part of jQuery UI. In my previous post, I discussed working with this effect associated with table rows. In this tutorial, I will show how to use it with two related lists that allow the user not only to sort items in each list but drag them to the other list as well. We'll cover a couple of nifty items such as ensuring that the dragged item matches the styles on the new list as well as allowing you to switch lists via double-clicking. Lastly, we'll even deal with the issue that arises when you have no items in one of the lists and you can no longer add items back.

Setting up Sortable Lists
As noted in the prior posts, setting up sortable lists is extremely easy in jQuery UI. You simply set the selector for the itrms you want to be made sortable and then call the sortable custructor like so: $("#mySortableList").sortable(). If you want to connect your list with another list or lists, you simply supply the selector for the associated items with the "connectWith" option as you can see in the code below. You can see this at work as well on the connected lists example on the jQuery UI site.

Matching Classes on Received Items
There are some events specifically associated with connected lists, such as the "receive" event which is announced when an item from an associated list is received by a new list. We will use this event to address an issue that will come up when your lists have differing styles (as in the jQuery UI example). If that is the case, the style of the prior list items remains in place even when you drag it to a new list. We can use the "receive" event to call a method (called listChanged() in our example) which toggle the classes of the received item like in the snippet below, where ui.item is the item that was moved (note: the event and ui arguments are passed naturally by the receive event):

Switching Lists by Double-Clicking
When you have two related lists, you may not want to force someone to actually drag them across, especially when the lists get long. In this example I actually allow the user to double-click an item to append it to the end of the other list, at which point then can choose to reorder it as they want.

To do this, I first need to add a listener for the double-click event to the items on both lists like in the following line from the example below: $(".ui-state-default").dblclick(switchLists);. Since I only have two lists, I created a more generic switch lists function that determines what list the item came from and adds it to the other list. Finally, it ensures that it is styled the same as its siblings by adding and removing the necessary classes.

This took a little bit of traversing and selector trickery by first selecting the parent of the target item (i.e. the ul block) and then getting its "connectWith" option to get an array of associated items (in this case there are 2) and then filters that by the one that is not the current items parent (i.e. the other list). I then only need to append the item to the "other list" using the appendTo method and then remove its current class while adding the class that matches its siblings (i.e. the other li items).

Removing All Items from a Sortable List Some issues arise when you remove all items from a sortable list. You can see this at play in the jQuery UI example. If yuo drag all the items out of one list, you can't ever add items back. This is resolved by my double-click method but it caused a problem in that I determine the style to add based upon its siblings which, in this case, there are none