Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Reorderer and its Family

About the Reorderer

The Reorderer is a component that provides reusable, accessible drag and drop support for DHTML-based user interfaces. It is structured in three discrete layers, providing lots of flexibility and customizability for implementers. These layers are:

  1. The component layer, which provides the overall structure for adding accessible reordering to your pages. This layer consists of a JavaScript object with a rich API. This is the "engine" that powers the interaction, and is the place to go to listen for interesting events and actions within the component's lifecycle.
  2. The rules layer allows implementers to customize the style of drag and drop interaction based on a particular context. This layer consists of JavaScript functions that can be plugged into the Reorderer. Out of the box, the Reorderer offers modes for reordering lists, grids, and layouts. You can supply your own custom interactions, too.
  3. The look and feel layer, which provides specific styling and markup for particular applications of the Reorderer. This layer consists of HTML, CSS, and configuration options for the component. Out of the box, we ship a template for organizing image thumbnails, along with functional examples providing a start point for all sorts of lists, grids, and multi-column layouts.

The Reorderer Illustrated