What is the List Reorderer?

The List Reorderer is part of the Reorderer family of components. It is a JavaScript-based user interface component that lets users reorder elements in a list of similar things.

The List Reorderer provides fully keyboard-accessible and mouse-based direction manipulation of list elements on-screen. It is intended to work well with screen magnifiers, low screen resolutions, and linear layouts. The List Reorderer is based on the Reorderer, reusable JavaScript library that enables developers to create accessible drag-and-drop solutions in a variety of contexts.

What problem are we solving?

The user needs a way to change the order or manipulate the position of list elements on the screen.  They need to re-order items in a list of similar items, and they do not need to visually preview the new layout before making the change.

What needs are we meeting?

Functional Requirements 

  • Drag and drop lists elements to reorder the list.
  • Use the keyboard to move list elements.
  • Give user visual and audio cues to discover reordering capability
  • Degrade gracefully for those unable to use dynamic drag and drop
  • Allow time based material to be reordered
  • Use a "drop target to show user where the element will be 'dropped'.
  • An avatar should show the user the element while they are dragging.

How are we meeting the needs?



Context Storyboards

  • \[

Design Pattern

Functional Requirements

  • TBD

User Testing

  • To be scheduled

Story Cards

User Modeling


  • TBD









Roadmap, Known issues, and Task List

Working Pages

Technical Working Pages

Design Working Pages