Reorderer Screencast

Outline

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

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

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.

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