Step 1: Modify your markup

In a browser window, the HTML with styles applied might look like this:

Open

That's all! Those are more than enough changes to be able to reorder your words using the Grid Reorderer.

Step 2: Write the script to initialize the Grid Reorderer

You'll need to create a file to contain your initialization script - the script you write to apply the Reorderer to your list.

That's it! That's all you need to do to add the Grid Reorderer functionality to your document.

If you look at the file in a browser now, it doesn't look any different than it looked before - there's no way to tell that words can be reordered. That's what the styles are for.

Step 3: Add the script to your HTML

You'll need to add your initialization script, along with the Infusion library, to you HTML file. In the header of the file, link to the Javascript files with <script> tags:

Keep in mind that the InfusionAll.js file is minified - all of the whitespace has been removed - so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:

But all of these individual files are not necessary to make it work - the InfusionAll.js file has everything you need.

Step 4: Apply styles

There are a number of "interesting moments" that happen while items are being reordered. These include, for example, when the mouse cursor dwells over top of something that is movable, or when the tab key is used to move focus to the reorderable items.

The Fluid Infusion library includes stylesheets that you can add to your file to provide styling for these interesting moments. The CSS file Reorderer.css provides styles for the interesting moments that happen when reordering items.

Add this file to your HTML file by using a <link> element in the header: