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

Please view or edit the documentation there, instead.

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: Nov 11, 2013Version comment
2 min read

Name

Description

Values

Default

selectors

JavaScript object defining CSS-style selectors for important DOM elements. See Selectors for more information.

The object must be a list of objects containing any subset of the following keys:

  dropWarning
  movables
  selectables
  dropTargets
  grabHandle
  stylisticOffset

 

selectors: {
    dropWarning: ".flc-reorderer-dropWarning",
    movables:    ".flc-reorderer-movable",
    selectables: ".flc-reorderer-movable",
    dropTargets: ".flc-reorderer-movable",
    grabHandle: "",
    stylisticOffset: ""
}

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 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
}];
selectablesTabindexNormally injected automatically from the layoutHandlerString IoC expression
selectablesTabindex: "{that}.layoutHandler.options.selectablesTabindex"

avatarCreator

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

 

The item being dragged will be cloned

disableWrap

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

boolean

false

mergePolicyan object describing how user options should be merged in with defaults
For information on options merging, see Options Merging		 
mergePolicy: {
    keysets: "replace",
    "selectors.selectables": 
               "selectors.movables",
    "selectors.dropTargets": 
               "selectors.movables"
}