Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Reorderer Configuration Options






an object describing how user options should be merged in with defaults
For information on options merging, see Options Merging for Infusion Components


mergePolicy: {
    keysets: "replace",


JavaScript object containing listeners to be attached to the supported events.

Keys in the object are event names, values are functions or arrays of functions.

See fluid:Supported Events


an object containing CSS class names for styling the Reorderer.

The object may contain any of the keys defined in the default class names (shown to the right). Any class names not provided will revert to the default.

styles: {
    defaultStyle: "fl-reorderer-movable-default",
    selected: "fl-reorderer-movable-selected",
    dragging: "fl-reorderer-movable-dragging",
    mouseDrag: "fl-reorderer-movable-dragging",
    hover: "fl-reorderer-movable-hover",
    dropMarker: "fl-reorderer-dropMarker",
    avatar: "fl-reorderer-avatar"


an object containing sets of keycodes to use for directional navigation, and for the modifier key used for moving a movable item.

The object must be a list of objects containing the following keys:
  modifier : a function that returns true or false, indicating whether or not the required modifier(s) are activated

fluid.reorderer.defaultKeysets = [{
    modifier : function (evt) {
        return evt.ctrlKey;
    up : fluid.reorderer.keys.UP,
    down : fluid.reorderer.keys.DOWN,
    right : fluid.reorderer.keys.RIGHT,
    left : fluid.reorderer.keys.LEFT
    modifier : function (evt) {
    return evt.ctrlKey;
    up : fluid.reorderer.keys.i,
    down : fluid.reorderer.keys.m,
    right : fluid.reorderer.keys.k,
    left : fluid.reorderer.keys.j


a function that returns a valid DOM node to be used as the dragging avatar


The item being dragged will be cloned


Deprecated as of 1.1.2: If an afterMoveCallbackUrl is provided, a default listener for this event will post a string version of the model to the URL.

The server URL to POST the new item order to


New in v1.3

This option is used to disable wrapping of elements within the container.

//example of grid reorderer	
var reorderer = fluid.reorderGrid('.myGrid', {
selectors: {
    movables: 'p'
disableWrap: true
//example of image reorderer	
var reorderer = fluid.reorderImages(".flc-imageReorderer", {
selectors: {
movables: ".flc-imageReorderer-item"
disableWrap: true
//example of layout reorderer	
var reorderer = fluid.reorderLayout ("#fluid-LayoutReorderer-sample2", {
selectors: {
columns: ".myColumn",
modules: "> div > div",
lockedModules: ".locked",
dropWarning: ".flc-reorderer-dropWarning"
disableWrap: true
//example of list reorderer	
var reorderer = fluid.reorderList(".todo-list", {
    selectors: {
        movables: ".movable"
    styles: {
        defaultStyle: "demo-reorderer-movable-default",
        selected: "demo-reorderer-movable-selected",
        dragging: "demo-reorderer-movable-dragging",
        mouseDrag: "demo-reorderer-movable-mousedrag",
        hover: "demo-reorderer-movable-hover",
        dropMarker: "demo-reorderer-dropMarker",
        avatar: "demo-reorderer-avatar"
    disableWrap: true