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.
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.
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;
}
<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>
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 (
"[fluid:id^=myUniquePrefix]")
For detailed information about the List Reorderer, see List Reorderer API.
Sorting Grids
The Grid Reorderer interface allows developers to make basic grid of elements reorderable with a single line of JavaScript.
.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;
}
<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>
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.
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.
.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;
}
<table id="portlet-reorderer-root">
<tbody>
<tr>
<td id="c1">
<div class="portlet" id="portlet1">
<div class="title">portlet 1</div>
<div class="content"> </div>
</div>
<div class="portlet" id="portlet2">
<div class="title">portlet 2</div>
<div class="content"> </div>
</div>
<div class="portlet" id="portlet3">
<div class="title">portlet 3</div>
<div class="content"> </div>
</div>
</td>
<td id="c2">
<div class="portlet" id="portlet4">
<div class="title">portlet 4</div>
<div class="content"> </div>
</div>
</td>
<td id="c3">
<div class="portlet" id="portlet5">
<div class="title">portlet 5</div>
<div class="content"> </div>
</div>
<div class="portlet" id="portlet6">
<div class="title">portlet 6</div>
<div class="content"> </div>
</div>
</td>
<td id="c4">
</td>
</tr>
</tbody>
</table>
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", {
selectors: {
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
layoutSelectorsobject identifying- the table cells as columns ("
columns: "td"") and - any
divchildren of the table cells as modules within the columns ("modules: "td > div")
- the table cells as columns ("
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.
Full API
For specific details on the full Reorderer API, see Reorderer API