/
Integrating the Reorderer - v0.3

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.

Integrating the Reorderer - v0.3

Jun 21, 2008

Demo
All of the Demos on this page are working examples. You can use a mouse to drag and drop items, and you can also use the keyboard: Use the arrow keys to select an item, and hold down the Control key while using the arrow keys to move an item.

Markup
The HTML for each example is shown to the right of the Demo. It illustrates the use of classes and ids for the example.

Script
The JavaScript used for each example is shown below the Markup. Each example includes the Fluid-all.js file in the header of the document, along with a file that contains the initialization script. The initialization script is shown for each example. This script is the heart of the example, showing how the Reorderer is applied to the markup.

CSS
The Reorderer applies CSS class names to the markup dynamically. The style sheet, defining styles for the various default class names, is shown below the Demo for each example. The styles are responsible for providing visual indication of "interesting moments" in the interaction, such as when an item is selected using the keyboard, or when the mouse hovers over an item.

Sorting Lists

The Simple List Reorderer interface allows developers to make any list reorderable with a single line of JavaScript.

In this example, two parameters are passed to the fluid.reorderList() initialization:

  • a container selector based on the ID of the list ("#todo-list")

  • an item selector based on the ID prefix of the list items ("[fluid:id^=myUniquePrefix]")

For detailed information about the Simple List Reorderer, see Simple List Reorderer API - v0.3.

fluid:Back to top

Sorting Grids

The Simple Grid Reorderer interface allows developers to make basic grid of elements reorderable with a single line of JavaScript.

In this example, two parameters are passed to the fluid.reorderGrid() initialization:

  • a container selector based on the class of the container (".reorderer_container")

  • an item selector based on the class of the divs (".orderable")

For detailed information about the Simple Grid Reorderer, see Simple Grid Reorderer API - v0.3.

fluid:Back to top

Sorting Portlets or other content modules

The Simple Layout Reorderer interface allows developers to make any layout of arbitrary content modules reorderable with a single line of JavaScript.

In this example, two parameters are passed to the fluid.reorderLayout() initialiation:

  • a container selector based on the ID of the table ("#portlet-reorderer-root")

  • a layoutSelectors object identifying

    • the table cells as columns ("columns: "td"") and

    • any div children of the table cells as modules within the columns ("modules: "td > div")

Note that "portlets" can be moved into the empty column to the right of the table.

For detailed information about the Simple Portlet Reorderer, see Simple Layout Reorderer API - v0.3.

fluid:Back to top

Full API

For specific details on the full Reorderer API, see Reorderer API - v0.3

fluid:Back to top