This is a fully featured example of drag ordering. There are several ways in which we can drag-order a list, and this example shows the approach where the item is immediately reordered while being dragged. The advantage of this version is that it doesn't require visual cues for drop targets or a ghost image. The drawback is that there is no way to cancel the action once started (e.g., by using the Escape key).
The example uses a form with some fields that represent a task list ordered by priority. The form works with or without the drag ordering feature. When JavaScript is disabled, the ordering is done by inputting the priorities in the appropriate form controls. These form controls are hidden when drag ordering is enabled (when JavaScript kicks in). The ordering can also be done using the keyboard.
The code uses the drag events where supported, and provides a fallback touch-based version for some mobile devices.
The items are animated using the FLIP technique.