Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section
Column
width65%

Excerpt

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.
Column
width35%
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minlevel2
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOther Components in the Reorder Family
borderStylesolid

...