This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.

Integrating the Reorderer

Owned by Anastasia Cheetham
Last updated: Jun 12, 2013 by Michelle D'SouzaVersion comment
6 min read

Working Demos with Instructions

The Reorderer allows users to directly move around and re-arrange content on a page. A number of features of the Reorderer can be customized, providing a great deal of power and flexibility, but in its basic form, it is very simple to use.

The examples on this page illustrate some of the ways the Reorderer can be used to make different types of content orderable. Each of the examples includes several things:

  • Demo: a working demonstration of the Reorderer in action.
  • Markup: the HTML used to produce the demo.
  • Script: the JavaScript that was added to the markup to make it work.
  • CSS: the CSS styles that have been applied to the demo.
On This Page
Still need help?

Join the infusion-users mailing list and ask your questions there.

Demo
All of the Demos on this page are working examples. You can use a mouse to drag and drop items, and you can also use the keyboard: Use the arrow keys to select an item, and hold down the Control key while using the arrow keys to move an item.

Markup
The HTML for each example is shown to the right of the Demo. It illustrates the use of classes and ids for the example.

Script
The JavaScript used for each example is shown below the Markup. Each example includes the InfusionAll.js file in the header of the document, along with a file that contains the initialization script. The initialization script is shown for each example. This script is the heart of the example, showing how the Reorderer is applied to the markup.

CSS
The Reorderer applies CSS class names to the markup dynamically. The style sheet, defining styles for the various default class names, is shown below the Demo for each example. The styles are responsible for providing visual indication of "interesting moments" in the interaction, such as when an item is selected using the keyboard, or when the mouse hovers over an item.

Sorting Lists

The List Reorderer interface allows developers to make any list reorderable with a single line of JavaScript.

Sorting Lists Demo

CSS
li {
    padding: 3px;
    margin: 5px;
}
li.fl-reorderer-movable-default {
    background-color: #eee;
}
li.fl-reorderer-movable-hover {
    background-color: lightyellow;
    cursor: move;
}
li.fl-reorderer-movable-selected {
    background-color: #ddd;
}
li.fl-reorderer-movable-dragging {
    background-color: lightyellow;
}
li.fl-reorderer-movable-avatar {
    opacity: 0.55;
    filter: alpha(opacity=55);
    width: 300px;
    border: 0;
}
li.fl-reorderer-dropMarker {
    background-color: red;
    height: 2px;
    margin: -4px;
    padding: 0px;
}
Markup
<ul id="todo-list">
  <li id="myUniquePrefix.orderable1">
    Select the date
  </li>
  <li id="myUniquePrefix.orderable2">
    Create promotional plan
    <ul>
      <li>web site</li>
      <li>print materials</li>
    </ul>
  </li>
  <li id="myUniquePrefix.orderable3">
    Book facilities
    <ul>
      <li>Select building</li>
      <li>Book rooms</li>
    </ul>
  </li>
  <li id="myUniquePrefix.orderable6">
    Develop a conference daily schedule of events
  </li>
</ul>
Script

In the header:

<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="todo-list.js"></script>
</head>

In todo-list.js:

jQuery(document).ready(function () {
  fluid.reorderList("#todo-list", {
    selectors: {
      movables:"[id^=myUniquePrefix]"
    }
  });
});

In this example, two parameters are passed to the fluid.reorderList() initialization:

  • a container selector based on the ID of the list ("#todo-list")
  • an optional object containing configuration parameters, in this case a custom selector identifying the movable items, based on the ID prefix of the list items ("[Infusion13:id^=myUniquePrefix]")

For detailed information about the List Reorderer, see List Reorderer API.

Infusion13:Back to top

Sorting Grids

The Grid Reorderer interface allows developers to make basic grid of elements reorderable with a single line of JavaScript.

Sorting Grids Demo


CSS
.reorderer_container {
  padding: 20px;
  border: 1px dashed red;
  overflow: hidden;
  background-color: #eee;
}
.flc-reorderer-movable {
  background-color: lightyellow;
  width: 100px;
  height: 50px;
  float: left;
  margin: 0 10px 10px 0;
  text-align: center;
  padding-top: 10px;
}
.fl-reorderer-movable-default {
  border: 2px solid #ddd;
}
.fl-reorderer-movable-hover {
  border: 2px solid #666;
}
.fl-reorderer-movable-dragging {
    background-color: white;
}
.fl-reorderer-movable-selected {
  border: 2px solid #666;
  background-color: #ddd;
}
.fl-reorderer-movable-avatar {
    background-color: blue;
    opacity: 0.75;
}
.fl-reorderer-dropMarker{
  height: 50px !important;
  width: 4px;
  background-color: green;
}
Markup
<div class="reorderer_container">    
  <div class="flc-reorderer-movable" id="box0">
    <div class="caption">Item 0</div>
  </div>
  <div class="flc-reorderer-movable" id="box1">
    <div class="caption">Item 1</div>
  </div>
  <div class="flc-reorderer-movable" id="box2">
    <div class="caption">Item 2</div>
  </div>
  <div class="flc-reorderer-movable" id="box4">
    <div class="caption">Item 4</div>
  </div>
  <div class="flc-reorderer-movable" id="box5">
    <div class="caption">Item 5</div>
  </div>
  <div class="flc-reorderer-movable" id="box6">
    <div class="caption">Item 6</div>
  </div>
</div>
Script

In the header:

<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="grid.js"></script>
</head>

In grid.js:

jQuery(document).ready(function () {
  fluid.reorderGrid(".reorderer_container");
});

In this example, one parameter is passed to the fluid.reorderGrid() initialization:

  • a container selector based on the class of the container (".reorderer_container")

The default selector is used to identify the movable items (a class of "flc-reorderer-movable").

For detailed information about the Grid Reorderer, see Grid Reorderer API.

Infusion13:Back to top

Sorting Portlets or other content modules

The Layout Reorderer interface allows developers to make any layout of arbitrary content modules reorderable with a single line of JavaScript.

Sorting Portlets Demo

CSS
.portlet {
  width: 75px;
  height: 40px;
  background-color: lightyellow;
  padding: 10px;
  margin: 0 10px 10px 0 !important;
  text-align: center;
}
#portlet-reorderer-root {
  border: 1px solid black;
}
td {
  padding: 8px;
  vertical-align: top;
  border: 1px solid black;
}
.fl-reorderer-movable-default {
  border: 2px solid #ddd;
}
.fl-reorderer-movable-hover {
  border: 2px solid #666;
}
.fl-reorderer-movable-dragging {
    background-color: white;
}
.fl-reorderer-movable-selected {
  border: 2px solid #666;
  background-color: #ddd;
}
.fl-reorderer-movable-avatar {
  height: 25px;
  width: 50px;
  background-color: blue;
  opacity: 0.75;
}
.fl-reorderer-movable-dropMarker {
  height: 4px !important;
  width: 80px;
  background-color: green;
}
Markup
<table id="portlet-reorderer-root">
  <tbody>
    <tr>
      <td id="c1">
        <div class="portlet" id="portlet1">
          <div class="title">portlet 1</div>
          <div class="content">&nbsp;</div>
        </div>
        <div class="portlet" id="portlet2">
          <div class="title">portlet 2</div>
          <div class="content">&nbsp;</div>
        </div>
        <div class="portlet" id="portlet3">
          <div class="title">portlet 3</div>
          <div class="content">&nbsp;</div>
        </div>
      </td>
      <td id="c2">
        <div class="portlet" id="portlet4">
          <div class="title">portlet 4</div>
          <div class="content">&nbsp;</div>
        </div>
      </td>
      <td id="c3">
        <div class="portlet" id="portlet5">
          <div class="title">portlet 5</div>
          <div class="content">&nbsp;</div>
        </div>
        <div class="portlet" id="portlet6">
          <div class="title">portlet 6</div>
          <div class="content">&nbsp;</div>
        </div>
      </td>
      <td id="c4">
      </td>
    </tr>
  </tbody>
</table>
Script

In the header:

<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="portlets.js"></script>
</head>

In portlets.js:

jQuery(document).ready(function () {
  fluid.reorderLayout ("#portlet-reorderer-root", {
    columns: "td",
    modules: "td > div"
  });
});

In this example, two parameters are passed to the fluid.reorderLayout() initialiation:

  • a container selector based on the ID of the table ("#portlet-reorderer-root")
  • a layoutSelectors object identifying
    • the table cells as columns ("columns: "td"") and
    • any div children of the table cells as modules within the columns ("modules: "td > div")

Note that "portlets" can be moved into the empty column to the right of the table.

For detailed information about the Layout Reorderer, see Layout Reorderer API.

Infusion13:Back to top

Full API

For specific details on the full Reorderer API, see Reorderer API

Infusion13:Back to top