Reorderer API

This page has not yet been updated to reflect the latest API changes.

Reorderer Overview

The Reorderer will handle almost any arbitrary stream of markup you pass to it, assuming a very simple contract is maintained:

The orderable elements are contained within some kind of container element.
A selector for the container is passed to the Reorderer upon instantiation.

Optional:

Provide a callback function. This will be called by the Reorderer each time the user reorders an element, and is generally used to communicate ordering changes back to the server.
Specify configuration options to customize the behaviour of the Reorderer, including the selection of orderable elements within the container. These are documented below.

Creation

To create a generic reorderer:

fluid.reorderer(container[, options]);

There are four pre-configurations of the Reorderer (List, Image, Grid, and Layout) provided as a convenience for particular contexts and use cases.

List Reorderer

fluid.reorderList(container[, options]);

Allows reordering of elements in a vertical or horizontal list. More information is available at List Reorderer API.

Grid Reorderer

fluid.reorderGrid(container[, options]);

Allows reordering of a grid of items. More information is available at Grid Reorderer API.

Layout Reorderer

fluid.reorderLayout(container[, options]);

Allows reordering of portlets, content blocks, or other chunks of layout arranged in columns. More information is available at Layout Reorderer API.

Image Reorderer

fluid.reorderImages(container[, options]);

Allows reordering of images, image thumbnails. More information is available at Image Reorderer API.

Parameters

container

The container parameter is a CSS-based selector, single-element jQuery object, or DOM element specifying the root node of the Reorderer.

options

The options parameter is an optional collection of name-value pairs that configure the Reorderer, as described below in the Options section.

Supported Events

Options

General options

Selectors

The selectors option is an object containing CSS-based selectors for various parts of the Reorderer. Supported selectors are:

Advanced options

CSS Classes

The Reorderer applies CSS classes to orderable items, and updates them as they are moved. These classes can be used to apply visual cues to the various states of the orderable items. The class names are configurable. The default class names are:

   fl-reorderer-movable-default - This class is applied to elements in their default state.
   fl-reorderer-movable-selected - This class is applied to the element that has been selected. The selected item can then be moved using keystrokes.
   fl-reorderer-movable-hover - This class is applied to orderable elements when the mouse hovers over them.
   fl-reorderer-movable-dragging - This class is applied to the orderable element that is currently being moved using the keyboard, and to the orderable element that is currently being moved using the mouse.
   fl-reorderer-movable-avatar - This class is applied to the avatar, which defaults to the image of the orderable element as it is being dragged about by the mouse.
   fl-reorderer-movable-dropMarker - This class is applied to the drop target indicator when the mouse is used to drag an item.

Dependencies

The Reorderer dependencies can be met by including the MyInfusion.js file in the header of the HTML file:

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.