This example shows how JavaScript can be used to re-order content in the DOM, using the Up-Arrow and Down-Arrow keys to move a focused item. Behaviours like this might be the basis of a selection and sorting interface, such as the list of messages in a web-based email client.
It's implemented with a keydown event on the parent
list, which is filtered so that it only responds to the two specific
keys we're interested in. The script has to block the default action
of those keys when they're used, so they don't cause the page
to scroll at the same time. But since this only happens when the
focus is inside the list, they'll continue to work as scrolling keys
whenever the focus is outside it.
Although this example only implements keyboard-based re-ordering, in practise it would usually be supplemented with mouse or touch-based drag-and-drop.
Tab to any of the links in this list, then use the Up-Arrow and Down-Arrow keys to move the selected item:
The JavaScript code for this example can be found in: JS_C_A11.js