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.
Grid Reorderer API
This page has not yet been updated to reflect the latest API changes.
Grid Reorderer Overview
The Grid Reorderer is a convenience function for applying the Reorder to a grid of items with minimal effort. This page provides technical details of the API.
Creation
var myReorderableGrid = fluid.reorderGrid(container[, options]);
Parameters
container
The container
is a CSS-based selector, single-element jQuery object, or DOM element that identifies the DOM element that contains the elements to be reorderable. This may be a <div>
that encapsulates the reorderable elements, for example.
options
The options
object is an optional collection of key/value pairs that can be used to further configure the Grid Reorderer, as described below in the Options section.
This component is in Production status
Join the infusion-users mailing list and ask your questions there.
Supported Events
The Grid Reorderer fires the following events (for more information about events, see Events):
Event |
Type |
Description |
Parameters |
Parameter Description |
---|---|---|---|---|
|
default |
This event fires before a drop warning is displayed. |
|
|
|
default |
This event fires when an item is selected by the user. |
|
|
|
"preventable" |
This event fires just before a request to move is processed. Because the event is preventable, listeners may prevent the move from happening. |
|
|
|
default |
This event fires just before an item is actually moved. |
|
requestedPosition = { element, // the drop target position // the position, relative to the drop target, // that a dragged item should be dropped. // One of BEFORE, AFTER, INSIDE, or REPLACE } |
|
default |
This event fires after an item has successfully been moved. For more information, see Talking to the Server Using The afterMove Event |
|
requestedPosition = { element, // the drop target position // the position, relative to the drop target, // that a dragged item should be dropped. // One of BEFORE, AFTER, INSIDE, or REPLACE }
|
|
default |
This event fires when the cursor moves over top of an item, and when the cursor moves away from an item. The default listener either adds or removes the hover class ( |
|
|
|
default |
This event fires any time the order of the items changes, or when the |
none |
|
Options
Selectors
The selectors
option is an object containing CSS-based selectors for various parts of the Grid Reorderer. Supported selectors are:
Name |
Description |
Default |
Examples |
---|---|---|---|
|
Identifies the DOM elements contained within the Reorderer container that can be moved using the Reorderer. |
|
selectors: { movables: "div.movable" } |
|
Identifies the DOM elements contained within the Reorderer container that can be selected using keyboard. Note that selectable elements do not have to be movable. |
same as |
selectors: { selectables: "div.selectable" } |
|
Identifies the DOM elements contained within the Reorderer container that can have movable elements dropped relative to them. Note that not all elements within the container need to be drop targets. |
same as |
selectors: { dropTargets: "div.dropTarget" } |
|
If present, identifies a single element within a movable item that the user must click on to drag the movable item. (If not specified, the entire movable item can be clicked on.) |
"" |
selectors: { grabHandle: ".title-bar" } |
|
Identifies a single element within the DOM that can be shown to display a warning when the user tries to move an item where it can't be moved. It is assumed that this element contains whatever drop warning text and mark-up the implementor desires. |
|
selectors: { dropWarning: "#drop-warning" } |
General Options
Name | Description | Values | Default |
---|---|---|---|
| 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
| selectors: { dropWarning: ".flc-reorderer-dropWarning", movables: ".flc-reorderer-movable", selectables: ".flc-reorderer-movable", dropTargets: ".flc-reorderer-movable", grabHandle: "", stylisticOffset: "" } |
| 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 |
| 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: | 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 }]; |
selectablesTabindex | Normally injected automatically from the layoutHandler | String IoC expression | selectablesTabindex: "{that}.layoutHandler.options.selectablesTabindex" |
| a function that returns a valid DOM node to be used as the dragging avatar |
| The item being dragged will be cloned |
| This option is used to disable wrapping of elements within the container. | boolean |
|
mergePolicy | an 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" } |
Grid-specific Options
Name |
Description |
Values |
Default |
---|---|---|---|
|
indicates the role, or general use, for this instance of the Reorderer |
|
|
Dependencies
The Grid Reorderer dependencies can be met by including the MyInfusion.js
file in the header of the HTML file:
<script type="text/javascript" src="MyInfusion.js"></script>
Alternatively, the individual file requirements are:
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script> <script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script> <script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.widget.js"></script> <script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.mouse.js"></script> <script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.draggable.js"></script> <script type="text/javascript" src="framework/core/js/FluidDocument.js"></script> <script type="text/javascript" src="framework/core/js/jquery/jquery.keyboard-a11y.js"></script> <script type="text/javascript" src="lib/json/js/json2.js"></script> <script type="text/javascript" src="framework/core/js/Fluid.js"></script> <script type="text/javascript" src="framework/core/js/FluidIoC.js"></script> <script type="text/javascript" src="framework/core/js/FluidView.js"></script> <script type="text/javascript" src="framework/core/js/FluidDOMUtilities.js"></script> <script type="text/javascript" src="framework/core/js/DataBinding.js"></script> <script type="text/javascript" src="framework/core/js/FluidIoC.js"></script> <script type="text/javascript" src="components/reorderer/js/ReordererDOMUtilities.js"></script> <script type="text/javascript" src="components/reorderer/js/GeometricManager.js"></script> <script type="text/javascript" src="components/reorderer/js/Reorderer.js"></script>