Child pages
  • Simple List Reorderer Tutorial - v0.4

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin
Section
Column
width60%
Info

This documentation refers to the API documents for the v0.4 released version of the Fluid Infusion code. For documentation specific to the trunk version, please see List Reorderer Tutorial

This page will walk you through an example of using the Fluid Reorderer's reorderList() function to reorder a list in an HTML file.

This tutorial assumes that:

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the Reorderer is and does
  • now you just want to know how to add it to your file.

For more general information about the Reorderer, see Reorderer. For technical API documentation, see Simple List Reorderer API - v0.4 and Reorderer API - v0.4.

Tutorial: How to Use the List Reorderer

Scenario

You are organizing a small conference, and there is lots to do. Being the organized person you are, you create a to-do list. You'd like to use the Reorderer to allow the order of items to be changed. This tutorial will show you how to use the Fluid List Reorderer for this.

There are four basic steps to using the List Reorderer in your application:

  • Step 0: Download and install the Fluid Infusion library
  • Step 1: Prepare your markup
  • Step 2: Write the script
  • Step 3: Add the script to your HTML
  • Step 4: Apply styles

The rest of this tutorial will explain each of these steps in detail.

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#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid

Join the fluid-talk mailing list and ask your questions there.

...

Section
Column

The List Reordeer needs to know about the 'container' of your list. In this case, that would be the <ol> element. The Reorderer accepts a jQuery selector, so you can choose any method that will uniquely identify the <ol> element. We'll attach a unique ID to it:

Code Block
html
html
<ol id="todo-list">
  <li>Select the date</li>
  ...
Column
Panel
borderColor#566b30
bgColor#D3E3C4
borderStyleoutset
titleNote
borderStyleoutset

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.

...

Section
Column
Code Block
html
html
<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>
Column
Panel
borderColor#566b30
bgColor#D3E3C4
borderStyleoutset
titleNote
borderStyleoutset

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]

...

Panel
borderColor#566b30
bgColor#D3E3C4
borderStyleoutset
titleNote
borderStyleoutset

The class names given below are the defaults. It is possible to override these, if you desire. For information on how to do this, see the List Reorderer API.

...

If we add a stylesheet with these styles (along with some global styles to make the font look a bit nicer, etc.), your list will look like this:

{} !list-sortable.png! {center}
Wiki Markup
Center
Image Added

When you hover over an item, it will be apparent:

{} !list-hover.png! {center}
Wiki Markup
Center
Image Added

If you use the tab and arrow keys to select an item, you'll be able to tell:

{} !list-selected.png! {center}
Wiki Markup
Center
Image Added

And while you're dragging, you'll be able to tell where the drop will happen:

{} !list-dragging.png! {center}
Wiki Markup
Center
Image Added

...