This documentation has not yet been updated to reflect the latest APIs.
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:
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:
The rest of this tutorial will explain each of these steps in detail.
infusionfolder somewhere convenient for your development purposes, likely in a
libfolder in your site hierarchy.
infusion-custom.js. You will link to this file in the headers of your HTML files.
Let's assume that you're starting with an HTML file, called
poetry.html, that contains your poetic words:
Also, you have some styles that lay the words out in a nice grid:
In a browser window, the HTML with styles applied might look like this:
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.
That's all! Those are more than enough changes to be able to reorder your words using 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.
In the example of the poetry words, create a file called poetry.js and in this file, write a function that looks like this:
This call passes a selector to the Grid Reorderer creator function. The selector identifies the element that is the container for your words.
Note that this selector uses the ID on the
<div>, but any selector would do. If you had a unique class name on the element, you could use that.
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.
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.
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:
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.