Developer Checklist — JavaScript Appendices

Correct code

JS_C_A11: Use scripting to re-order content in the DOM

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.

Live Demo

Tab to any of the links in this list, then use the Up-Arrow and Down-Arrow keys to move the selected item:

  1. New South Wales
  2. Victoria
  3. Queensland
  4. Western Australia
  5. South Australia
  6. Tasmania
  7. Australian Capital Territory
  8. Northern Territory

JavaScript Code

The JavaScript code for this example can be found in: JS_C_A11.js