Reorderer Screencast


What is Reorderer?

  • Richer, more direct interaction for organizing content in a web site
  • Enables the user to customize the layout and organization of their user interface
  • Not just accessible: designed to be easy to use even for people who use only the keyboard

Reorderer is a family

  • Same code, different customizations for different user needs
  • We give you the building blocks to create your own interactions, as well as out-of-the-box solutions you can plug in and use
  • Different interactions for reordering lists, grids, images, and layouts

How Reorderer is Different

  • When we started Reorderer, we looked at other JavaScript drag and drop solutions out there. They all had problems:
    • Jerky, awkward motion and "sticky" areas where the user was unable to drop their item properly
    • Strict markup requirements, limiting our creativity when designing interfaces
    • Inaccessible, or only marginally accessible using awkward menus
  • Reorderer started looking at the problem of drag and drop from the ground up
    • What is the user doing when they are dragging and dropping? We focus on organizing and ordering
    • Wanted to create a truly usable experience, even for people with disabilities.
  • End result: a really direct interaction for all users--feels like the real world where you just pick something up and go.

Examples of the Reorderer

  • The Reorderer is designed to work with any sort of markup you choose: here are just some examples we've created
  • Lists
    • Can see here how we provide useful indications (drop target, avatar)
    • Can mix up orderable and non-orderable items
  • Grids: move items within a 2D matrix
  • Images
    • Really smooth drag and drop, can't accidentally get stuck in an area where it won't drop
  • Layouts