Reorder Technical Overview

What is the Reorderer?

The Reorderer is a set of JavaScript objects that can be used by developers to create rich, accessible user interfaces that allow users to directly move around and re-arrange content on the page. The reorderer supports mouse-based drag and drop as well as fully keyboard-accessible controls as well.

In addition to the Reorderer JavaScript object, the Reorderer bundle includes:

• Three layout handlers: the ListLayoutHandler, the GridLayoutHandler, and the ModuleLayoutHandler. Layout handlers are responsible for understanding the overall geometry of a managed piece of markup. Users of the Reorderer may use the layout handlers provided, or create their own.

What Types of Markup Can the Reorderer Manipulate?

Any arbitrary stream of HTML markup can be sent to the Reorderer, provided that the reorderable elements:

1. are located within a container element that is passed to the Reorderer object upon instantiation,
2. can be identified by a function that is passed to the Reorderer upon instantiation

Where is the Reorderer Currently Used?

The Reorderer objects power the Lightbox, a concrete Fluid component designed to allow users to reorder images within an imaging application. The Lightbox is used within the Sakai Image Gallery tool. We also expect it to be integrated into Sakai's Page Order Helper, written by Josh Ryan, and the uPortal layout preferences UI.

More information about the relationship between the Reorderer, the Image Reorderer (formerly Lightbox), and the Gallery can be found on the Reorderer-Lightbox Separation of Concerns page.