Chapter 12. Sorting

The final interaction helper that we're going to look at is the sortables component. This component allows us to define one or more lists of elements (not necessarily actual <ul> or <ol> elements) where the individual items in the list(s) can be reordered by dragging.

The sortables component is like a specialized implementation of drag-and-drop, with a very specific role. It has an extensive API which caters for a wide range of behaviors. We'll be looking at the following aspects of the component in this chapter:

• The default sortable implementation

• Basic configurable properties

• Working with placeholders

• Sortable helpers

• Sortable items

• Connected sortables

• Sortable's wide range of built-in event handlers

• A look at sortable's methods

• Submitting the sorted result to a server

• Adding drag elements to a sortable