Child pages
  • Integrating the Reorderer - v0.3

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

This documentation refers to the v0.3 released version of the Reorderer code. For documentation specific to trunk, please see Integrating the Reorderer.

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 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 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 fluid-talk 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 Fluid-all.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 Simple List Reorderer interface allows developers to make any list reorderable with a single line of JavaScript.

Demo

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.


Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

CSS
li {
    padding: 3px;
    margin: 5px;
}
li.orderable-default {
    background-color: #eee;
}
li.orderable-hover {
    background-color: lightyellow;
    cursor: move;
}
li.orderable-selected {
    background-color: #ddd;
}
li.orderable-dragging {
    background-color: lightyellow;
}
li.orderable-avatar {
    opacity: 0.55;
    filter: alpha(opacity=55);
    width: 300px;
    border: 0;
}
li.orderable-drop-marker {
    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="Fluid-all.js"></script>
  <script type="text/javascript" src="todo-list.js"></script>
</head>

In todo-list.js:

jQuery(document).ready(function () {
  fluid.reorderList("#todo-list", "[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 item selector based on the ID prefix of the list items ("[fluid:id^=myUniquePrefix]")

For detailed information about the Simple List Reorderer, see Simple List Reorderer API - v0.3.

fluid:Back to top


Sorting Grids

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

Demo

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.



Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

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

In the header:

<head>
  <script type="text/javascript" src="Fluid-all.js"></script>
  <script type="text/javascript" src="grid.js"></script>
</head>

In grid.js:

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

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

  • a container selector based on the class of the container (".reorderer_container")
  • an item selector based on the class of the divs (".orderable")

For detailed information about the Simple Grid Reorderer, see Simple Grid Reorderer API - v0.3.

fluid:Back to top


Sorting Portlets or other content modules

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

Demo

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.


Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

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;
}
.orderable-default {
  border: 2px solid #ddd;
}
.orderable-hover {
  border: 2px solid #666;
}
.orderable-dragging {
    background-color: white;
}
.orderable-selected {
  border: 2px solid #666;
  background-color: #ddd;
}
.orderable-avatar {
  height: 25px;
  width: 50px;
  background-color: blue;
  opacity: 0.75;
}
.orderable-drop-marker {
  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="Fluid-all.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 Simple Portlet Reorderer, see Simple Layout Reorderer API - v0.3.

fluid:Back to top


Full API

For specific details on the full Reorderer API, see Reorderer API - v0.3

fluid:Back to top