Page Operations
Browse Space
Simple List Reorderer OverviewThe Simple 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. Initializationvar 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:
Selectors
| Name | Description | Values | Default |
|---|---|---|---|
| selectors | an object containing CSS-based selectors for various parts of the Reorderer | The object may contain any of the following keys: movables grabHandle If these are not provided, the defaults will be used |
selectors: {
movables: ".movables",
grabHandle: ""
}
|
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"
}
|
|
| 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:" | |
| orderChangedCallback | a function | function () {};
|
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 Simple 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="jquery/ui.droppable.js"></script> <script type="text/javascript" src="fluid/Fluid.js"></script> <script type="text/javascript" src="fluid/DragManager.js"></script> <script type="text/javascript" src="fluid/Reorderer.js"></script>