Page Operations
Browse Space
Simple Grid Reorderer OverviewThe Simple 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. For a simple working example, see Integrating the Reorderer - v0.3. Initializationvar myReorderableGrid = fluid.reorderGrid(containerSelector,
itemSelector,
orderChangedCallback,
options);
ParameterscontainerSelectorThe containerSelector is a CSS-based string selector identifying the DOM element that contains the elements to be reorderable. This may be a <div> that encapsulates the reorderable elements, for example. |
On This Page See Also Still need help? Join the fluid-talk mailing list |
itemSelector
The itemSelector is a CSS-based string selector that itdentifies all of the DOM elements that are to be reorderable.
orderChangedCallback - optional
The orderChangedCallback is an optional function that should be called by the Reorderer each time the order of items in the grid changes. The orderChangedCallback function can communicate the new order of the items to the server in any fashion. For more information on the orderChangedCallback function, see Order-Changed Callback - v0.3.
options - optional
The options object is an optional collection of key/value pairs that can be used to further configure the Grid Reorderer:
| Name | Description | Values | Default |
|---|---|---|---|
| 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
}];
|
| cssClassNames | an object containing 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 defaultCssClassNames (shown to the right). And class names not provided will revert to the default. | var defaultCssClassNames = { defaultStyle: "orderable-default", selected: "orderable-selected", dragging: "orderable-dragging", mouseDrag: "orderable-dragging", hover: "orderable-hover", dropMarker: "orderable-drop-marker", avatar: "orderable-avatar" }; |
| avatarCreator | a function that returns a valid DOM node to be used as the dragging avatar | The item being dragged will be cloned | |
| dropWarningId | the ID of an element that should be displayed if users attempt to move an item to a location where movement is not permitted | (none) | |
| instructionMessageId | the ID of the element containing any instructional messages | "message-bundle:" |