This component is in Production status

• List Reorderer API
• Reorderer API

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

<ol id="todo-list">
  <li>Select the date</li>
  ...

This example uses an ID, but you might, for example, use a CSS class, or the element hierarchy - whatever works, so long as it uniquely identifies the right element.

<ol id="todo-list">
  <li>Select the date</li>
  <li class="movable">Create promotional plan
    <ul>
      <li>web site</li>
      <li>print materials</li>
    </ul>
  </li>
  <li class="movable">Book facilities</li>
  <li class="movable">Book block of hotel rooms</li>
  <li class="movable">Develop a conference daily schedule of events</li>
  <li class="movable">Book speakers
    <ul>
      <li>Keynote</li>
      <li>Internal/employee</li>
    </ul>
  </li>
  ...
</ol>

As with the ID on the <ol>, we can use any jQuery selector. For example, we could attach a unique ID to each movable <li> with a unique prefix, maybe mylist-movable1, mylist-movable2, etc. Then we could use the jQuery selector [fluid:id^=mylist-movable]

jQuery(document).ready(function () {
    var opts = {
        selectors: {
            movables: ".movable"
        }
    };
    return fluid.reorderList("#todo-list", opts);
});

selectors is not the only option that can be used to configure the List Reorderer. For more information, see the List Reorderer API documentation.