Page Operations
Browse Space
List Reorderer OverviewThe List Reorderer allows reordering of elements in a vertical or horizontal list. This page provides technical details of the API. For a simple working example, see Integrating the Reorderer. Creationvar myReorderableList = fluid.reorderList(container[, options]);
ParameterscontainerThe container is a CSS-based selector |
On This Page See Also Still need help? Join the fluid-talk mailing list |
options
The options object is an optional collection of key/value pairs that can be used to further configure the List Reorderer, as described below in the Options section.
Supported Events
| Event | Type | Description | Parameters | Default listener |
|---|---|---|---|---|
| onShowKeyboardDropWarning | default | This event fires before a drop warning is displayed. | item, kbDropWarning | none |
| onSelect | default | This event fires when an item is selected by the user. | item | none |
| onBeginMove | "preventable" | This event fires just before a request to move is processed. Because the event is preventable, listeners my prevent the move from happening. | item | none |
| onMove | default | This event fires just before an item is actually moved. | item, requestedPosition | none |
| afterMove | default | This event fires after an item has successfully been moved. | item, requestedPosition, movables | If an afterMoveCallbackUrl is provided, a default listener for this event will post a string version of the model to the URL. |
| onHover | default | This event fires when the cursor moves over top of an item, and when the cursor moves away from an item. The state parameter indicates whether the cursor is moving to or away from the item. | item, state | The default listener either adds or removes the hover class (styles.hover to/from the item. |
Options
Selectors
| Name | Description | Values |
|---|---|---|
| selectors | an object containing CSS-based selectors for various parts of the List Reorderer | See Reorderer Selectors |
General options
| Name | Description | Values | Default |
|---|---|---|---|
| mergePolicy | an object describing how user options should be merged in with defaults | mergePolicy: {
"selectors.selectables":
"selectors.movables",
"selectors.dropTargets":
"selectors.movables",
keysets: "replace"
}
|
|
| 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 functinos. | See Supported Events |
| styles | an object containing CSS class names for styling the Reorderer. See below for a discussion of CSS styling of 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: "orderable-default",
selected: "orderable-selected",
dragging: "orderable-dragging",
mouseDrag: "orderable-dragging",
hover: "orderable-hover",
dropMarker: "orderable-drop-marker",
avatar: "orderable-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.defaultKeysets = [{
modifier : function (evt) {
return evt.ctrlKey;
},
up : fluid.keys.UP,
down : fluid.keys.DOWN,
right : fluid.keys.RIGHT,
left : fluid.keys.LEFT
},
{
modifier : function (evt) {
return evt.ctrlKey;
},
up : fluid.keys.i,
down : fluid.keys.m,
right : fluid.keys.k,
left : fluid.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 | |
| instructionMessageId | the ID of the element containing any instructional messages | "message-bundle:" |
List-specific options
| Name | Description | Values | Default |
|---|---|---|---|
| orientation | Indicates whether the list is oriented vertically (the default) or horizontally | fluid.orientation.VERTICAL and fluid.orientation.HORIZONTAL | fluid.orientation.VERTICAL |
| containerRole | indicates the role, or general use, for this instance of the Reorderer | fluid.roles.LIST fluid.roles.GRID fluid.roles.REGIONS |
fluid.roles.LIST |
Dependencies
The List Reorderer dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:
<script type="text/javascript" src="Fluid-all.js"></script>
Alternatively, the individual file requirements are:
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery/jARIA.js"></script> <script type="text/javascript" src="jquery/jquery.keyboard-a11y.js"></script> <script type="text/javascript" src="jquery/ui.core.js"></script> <script type="text/javascript" src="jquery/ui.draggable.js"></script> <script type="text/javascript" src="fluid/Fluid.js"></script> <script type="text/javascript" src="fluid/FluidDOMUtilities.js"></script> <script type="text/javascript" src="fluid/GeometricManager.js"></script> <script type="text/javascript" src="fluid/Reorderer.js"></script>