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.

Let's assume that you're starting with an HTML file, called poetry.html, that contains your poetic words:

<h2>Make Your Own Poetry</h2>
<div id="poetry-grid">
    <p>I</p>
    <p>you</p>
    <p>me</p>
    <p>love</p>
    <p>my</p>
    <p>your</p>
    <p>sun</p>
    <p>moon</p>
    <p>flower</p>
    <p>is</p>
    <p>are</p>
    <p>was</p>
    <p>stand</p>
    <p>sit</p>
    <p>walk</p>
    <p>rise</p>
    <p>set</p>
    <p>happy</p>
    <p>sad</p>
    <p>beautiful</p>
    <p>ugly</p>
    <p>great</p>
    <p>small</p>
    <p>ly</p>
    <p>s</p>
    <p>ed</p>
</div>

Also, you have some styles that lay the words out in a nice grid:

#poetry-grid {
    width   : 350px;
}

#poetry-grid p {
    background  : #eee;
    border  : 1px solid #CCC;
    margin      : 5px;        
    padding     : 5px;        
    text-align  : center;
    display     : inline;
    float       : left; 
}            

The Grid Reorderer needs to know about the 'container' of your words. In this case, the <div> would be the container, and the ID on the element will allow us to identify it to the Grid Reorderer. You'll also need to tell the Grid Reorderer exactly which elements you want to be reorderable. The default way to do that is to add a class of flc-reorderer-movable to anything that you want to be movable - in this case, your <p> elements that contain individual words. This might look like the sample on the right.

In the example of the poetry words, create a file called poetry.js and in this file, write a function that looks like this:

jQuery(document).ready(function () {
    fluid.reorderGrid("#poetry-grid");
});

This call passes a selector to the Grid Reorderer creator function. The selector identifies the element that is the container for your words.

Now, when the cursor dwells over a word, the cursor changes to a hand, and when focus is on a word, it is highlighted in yellow, as shown in the image on the right.

The styles in Reorderer.css are only a suggestion. You can create your own styles using the selectors you find in that file.