/
Tutorial - List Reorderer 0.5 Migration

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

Sept 29, 2008

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);