// This document is referenced / embedded into other documents, hence no other styling or formatting is necessary.
// This document should only contain a panel and the code.

<script type="text/javascript" src="http://www.fluidproject.org/releases/1.0/InfusionAll.js"></script>
ul#todo-list > li {
    padding: 3px;
    margin: 5px;
    background-color: #eee;
    background-color: lightyellow;
    cursor: move;
    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;
    background-color: red;
    height: 2px;
    margin: -4px;
    padding: 0px;
<ul id="todo-list">
  <li id="myUniquePrefix.orderable1">
    Select the date
  <li id="myUniquePrefix.orderable2">
    Create promotional plan
      <li>web site</li>
      <li>print materials</li>
  <li id="myUniquePrefix.orderable3">
    Book facilities
      <li>Select building</li>
      <li>Book rooms</li>
  <li id="myUniquePrefix.orderable6">
    Develop a conference daily schedule of events
<script type="text/javascript">
  $(document).ready(function () {
        fluid.reorderList("#todo-list", {selectors:{movables:"[id^=myUniquePrefix]"}});