Sortable
Chapter 12, “Draggable and Droppable,” introduced how jQuery UI provides plugins
that make implementing drag-and-drop UI easy to implement. This chapter presents
another jQuery UI plugin, Sortable, which enables you to make items in a list sortable, or
“rearrangeable.”In website development you might need to often sort items, and you will probably want to
change the order of the items. An example would be the order in which products appear in a
navigation or side menu.Without drag-and-drop, it’s still possible to give users the ability to tweak the order of items.
You can offer up or down arrows for shifting items in a list, for example, but drag-and-drop
sorting is the fastest, most intuitive way to implement this type of user interface.Making a List Sortable
As you’ve seen throughout this book, jQuery takes more complex programming tasks and
makes them easier. Sometimes, you can do a lot by adding just one line of code or even chain-
ing one additional function call to a selection. When you experience how easy jQuery makes
common programming tasks, it becomes nearly impossible to return to JavaScript program-
ming without the convenience offered by frameworks like jQuery. In Chapter 12, you saw
how making elements draggable amounts to making a selection and then making a single
function call. Making a list of items sortable via drag-and-drop is just as easy—you make a
selection of elements, and then you make a single function call. The function that you call in
this case is called sortable(). Like the drag-and-drop examples that were presented in Chapter
12, you have the ability to tweak element sortability using fi ne-grained options that you can
pass to the sortable() method with a JavaScript object literal. Each of the options that jQuery
UI provides for the Sortable plugin is defi ned in detail in Appendix K, “Sortable.”All that you need to make this possible is to include the relevant jQuery UI plugin, Sortable,
make a selection with jQuery, and then chain a call to the function sortable() onto that
selection. The Sortable plugin requires that you select a container element, whose immediate
children will be sortable by drag-and-drop. One example of a container is a <ul> element, and