Integrating the Reorderer

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 InfusionAll.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.

The 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 optional object containing configuration parameters, in this case a custom selector identifying the movable items, based on the ID prefix of the list items ("[Infusion13:id^=myUniquePrefix]")

For detailed information about the List Reorderer, see List Reorderer API.

Infusion13:Back to top

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

In this example, one parameter is passed to the fluid.reorderGrid() initialization:

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

The default selector is used to identify the movable items (a class of "flc-reorderer-movable").

For detailed information about the Grid Reorderer, see Grid Reorderer API.

Infusion13:Back to top

The 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 Layout Reorderer, see Layout Reorderer API.

Infusion13:Back to top

For specific details on the full Reorderer API, see Reorderer API

Infusion13:Back to top