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

Owned by Anastasia Cheetham
Last updated: Aug 30, 2011Version comment
3 min read

Name

Description

Values

Default

mergePolicy

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",
    "selectors.selectables": 
               "selectors.movables",
    "selectors.dropTargets": 
               "selectors.movables"
}

listeners

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

styles

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"
}

keysets

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
  up
  down
  right
  left 

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
}];

avatarCreator

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

 

The item being dragged will be cloned

afterMoveCallbackUrl

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
disableWrap

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

boolean

false