Web Development with jQuery

Chapter 13Sortable

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 chaining 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 programming 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 ...