This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.

Tutorial - List Reorderer 0.5 Migration

Owned by Anastasia Cheetham
Last updated: Sept 29, 2008Version comment
3 min read

This page will walk you through the process of upgrading your existing 0.4 List Reorderer implementation to the new 0.5 API. This tutorial assumes that

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the List Reorderer is and does
  • you have an existing implementation of the List Reorderer that worked with the 0.4 Infusion release.

Dependencies

If you use the Fluid-all.js file, you don't have to change this - this file still contains everything you need.

If, however, you are including independent files, you will need to add two files to your list: FluidDOMUtilities.js and GeometricManager.js. You also no longer need ui.droppable.js.

If you have...

You will need...

 
jquery/jquery-1.2.6.js
jquery/jquery.keyboard-a11y.js
jquery/ui.core.js
jquery/ui.draggable.js
jquery/ui.droppable.js
jquery/jARIA.js
fluid/Fluid.js
fluid/Reorderer.js

jquery/jquery-1.2.6.js
jquery/jquery.keyboard-a11y.js
jquery/ui.core.js
jquery/ui.draggable.js
jquery/jARIA.js
fluid/Fluid.js
fluid/FluidDOMUtilities.js    <== new!
fluid/GeometricManager.js     <== new!
fluid/Reorderer.js
On this Page
See Also
Still need help?

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

Initialization

The signature of the call to reorderList() has been significantly simplified:

Old

New

 
fluid.reorderList(containerSelector,
                  itemSelector,
                  orderChangedCallback,
                  options);

fluid.reorderList(container, options);

The specific changes are as follows:

  • the container parameter can now be
    • a CSS-based selector
    • a single-element jQuery object, or
    • a DOM element
  • the itemSelector and orderChangeCallback are now specified through the options paramter

Item Selector

Instead of passing a selector identifying the orderable items as a parameter to reorderList(), selectors are specified using the selectors option.

If you used to have...

Now you would have...

 
fluid.reorderList("#myList", ".myItems");

var myOpts = {
    selectors: {
        movables: ".myItems"
    }
};
fluid.reorderList("#myList", myOpts);

If you were using the form of the itemSelector that included movables, selectables, etc., then all of these should be moved into the selectors option:

If you used to have...

Now you would have...

 
var findItems = {
    movables: ".orderable",
    selectables: "li",
    dropTargets: "li"
};
fluid.reorderList("#list2", findItems);

var opts = {
    selectors: {
        movables: ".orderable",
        selectables: "li",
        dropTargets: "li" 
    }
};
fluid.reorderList("#list2", opts);

Order-changed Callback

Instead of passing an order-changed callback function as a parameter to reorderList(), the callback is specified using the events option, in particular the afterMove event.

If you used to have...

Now you would have...

 
var myCallback = function() {
    ...
};
fluid.reorderList(myElem, ".movable-item", myCallback);

var myCallback = function() {
    ...
};
var options = {
    selectors: {
        movables: ".movable-item"
    },
    events: {
        afterMove: myCallback
    }
};
fluid.reorderList(myElem, options);

Options

Other changes have been made to the format of the options object:

cssClassNames

The cssClassNames option has been renamed to styles:

If you used to have...

Now you would have...

 
var myClasses = {
  defaultStyle: "plain",
  selected: "selected",
  dragging: "dragging
};
var opts = {
  cssClassName: myClasses
};
fluid.reorderList(jQuery("body > ol:first"), opts);

var myClasses = {
  defaultStyle: "plain",
  selected: "selected",
  dragging: "dragging
};
var opts = {
  styles: myClasses
};
fluid.reorderList(jQuery("body > ol:first"), opts);