Page Comparison

...

Section

Column

width	50%

Include Page

	docsArchive:Sorting Lists DemodocsArchive:
	Sorting Lists Demo

Panel

bgColor	white
titleBGColor	#c1b7c3
title	CSS
borderStyle	solid

Code Block

borderColor	white
bgColor	white
borderStyle	solid

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

bgColor	white
titleBGColor	#c1b7c3
title	Markup
borderStyle	solid

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

<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

bgColor	white
titleBGColor	#c1b7c3
title	Script
borderStyle	solid

In the header:

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

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

In todo-list.js:

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

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

...

Section

Column

width	50%

Include Page

	docsArchive:Sorting Grids DemodocsArchive:
	Sorting Grids Demo

Panel

bgColor	white
titleBGColor	#c1b7c3
title	CSS
borderStyle	solid

Code Block

borderColor	white
bgColor	white
borderStyle	solid

.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

bgColor	white
titleBGColor	#c1b7c3
title	Markup
borderStyle	solid

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

<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

bgColor	white
titleBGColor	#c1b7c3
title	Script
borderStyle	solid

In the header:

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

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

In grid.js:

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

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

...

Section

Column

width	50%

Include Page

	docsArchive:Sorting Portlets DemodocsArchive:
	Sorting Portlets Demo

Panel

bgColor	white
titleBGColor	#c1b7c3
title	CSS
borderStyle	solid

Code Block

borderColor	white
bgColor	white
borderStyle	solid

.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

bgColor	white
titleBGColor	#c1b7c3
title	Markup
borderStyle	solid

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

<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

bgColor	white
titleBGColor	#c1b7c3
title	Script
borderStyle	solid

In the header:

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

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

In portlets.js:

html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid
	html

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

...

Versions Compared

Old Version 107

New Version 108

Key