Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Section
Column
width60%

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.
Column
solid
Panel
borderStyle
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
Table of Contents
toc
maxLevel
5
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid

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

...

Section
Column
width50%
Include Page
Sorting Lists Demo
Sorting Lists Demo
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleCSS
borderStylesolid
Code Block
borderColorwhite
bgColorwhite
borderStylesolid
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;
}

Column
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleMarkup
borderStylesolid
Code Block
html
html
borderColorwhite
bgColorwhite
borderStylesolidhtml
<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>
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleScript
borderStylesolid

In the header:

Code Block
html
html
borderColorwhite
bgColorwhite
borderStylesolidhtml
<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="todo-list.js"></script>
</head>

In todo-list.js:

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

...

Section
Column
width50%
Include Page
Sorting Grids Demo
Sorting Grids Demo
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleCSS
borderStylesolid
Code Block
borderColorwhite
bgColorwhite
borderStylesolid
.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;
}
Column
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleMarkup
borderStylesolid
Code Block
html
html
borderColorwhite
bgColorwhite
borderStylesolidhtml
<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>
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleScript
borderStylesolid

In the header:

Code Block
html
html
borderColorwhite
bgColorwhite
borderStylesolidhtml
<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="grid.js"></script>
</head>

In grid.js:

Code Block
html
html
borderColorwhite
bgColorwhite
borderStylesolidhtml
jQuery(document).ready(function () {
  fluid.reorderGrid(".reorderer_container");
});

...

Section
Column
width50%
Include Page
Sorting Portlets Demo
Sorting Portlets Demo
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleCSS
borderStylesolid
Code Block
borderColorwhite
bgColorwhite
borderStylesolid
.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;
}
Column
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleMarkup
borderStylesolid
Code Block
html
html
borderColorwhite
bgColorwhite
borderStylesolidhtml
<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>
Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleScript
borderStylesolid

In the header:

Code Block
html
html
borderColorwhite
bgColorwhite
borderStylesolidhtml
<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="portlets.js"></script>
</head>

In portlets.js:

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

...