This page will walk you through an example of adding the Fluid Layout Reorderer component to your application.

This tutorial assumes that:

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

For more general information about the Layout Reorderer, see Layout Reorderer. For technical API documentation, see Layout Reorderer API.

Tutorial: How to Use the Layout Reorderer

Scenario

You're creating a portal system that will aggregate news content from a number of different tech gadgetsources. You'd like to allow site visitors to rearrange the portlets. This tutorial will show you how to use the Fluid Layout Reorderer to offer this functionality.

There are four basic steps to adding the Layout Reorderer to your application:

• Setup: Download and install the Fluid Infusion library
• Step 1: Prepare your markup
• Step 2: Write the script
• Step 3: Add the script to your HTML
• Step 4: Styling