Beginning JavaScript® and CSS Development with jQuery

Chapter 11. Drag-and-Drop Sorting

In Chapter 10, I introduced how jQuery UI provides plugins that make implementing drag-and-drop UI very easy to implement. In this chapter, I present another jQuery UI plugin called Sortables, which enables you to make items in a list of some kind sortable, or "rearrangable."

The need for sorting items comes up often in Website Development. There's always going to be, through either need or convenience, the desire to change the order that items appear in. 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 complex programming tasks and makes them easy. Sometimes you can do a lot by adding just one line of code or even chaining one addition function call to a selection! Once you experience how easy jQuery makes common programming tasks, it becomes near impossible to return to boring, bloated, plain-vanilla JavaScript. In Chapter 10, you saw how making elements draggable amounts to making a selection, 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, then you make a single function call. The ...