Simple List Reorderer API - v0.3

itemSelector

The itemSelector is a CSS-based string selector that identifies the DOM elements that are to be reorderable. This may be all list items (i.e. <li>) within the list, or a subset of the items.

orderChangedCallback - optional

The orderChangedCallback is an optional function that should be called by the Reorderer each time the order of list items changes. The orderChangedCallback function can communicate the new order of list 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 List Reorderer:

Name	Description	Values	Default

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`
`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 fluid: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). Any 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:"