This page will walk you through an example of using the Fluid Reorderer's reorderGrid() function to make a grid of items reorderable.

This tutorial assumes that:

• you are already familiar with HTML, Javascript and CSS
• you are familiar with what the Grid Reorderer is and does
• now you just want to know how to add it to your file.

For technical API documentation, see Grid Reorderer API and Reorderer API.

Tutorial: How to Use the Grid Reorderer

Scenario

Let's suppose you're writing an online version of fridge-magnet poetry. Your application will have words in little boxes, and you want the user to be able to rearrange the words easily. This tutorial will show you how to use the Fluid Grid Reorderer for this.

There are five basic steps to adding the Reorderer to your application:

• Setup: Download and install the Fluid Infusion library
• Step 1: Prepare your markup
• Step 2: Write the script to initialize the Grid Reorderer
• Step 3: Add the script to your HTML
• Step 4: Apply styles

The rest of this tutorial will explain each of these steps in detail.