Simple List Reorderer API - v0.4
This documentation refers to the v0.4 released version of the Reorderer code. For documentation specific to the trunk, please see List Reorderer API.
Simple List Reorderer Overview
The 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.
Initialization
var myReorderableList = fluid.reorderList(containerSelector, itemSelector, orderChangedCallback, options);
Parameters
containerSelector
The containerSelector
is a CSS-based string selector that identifies the DOM element containing the list items to be reorderable. This may be the list itself (e.g. the <ul>
or <ol>
element) or an element that contains the list.
Join the fluid-talk mailing list and ask your questions there.
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.4.
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 |
---|---|---|---|
|
Indicates whether the list is oriented vertically (the default) or horizontally |
|
|
|
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.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 }]; |
|
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 |
var defaultCssClassNames = { defaultStyle: "orderable-default", selected: "orderable-selected", dragging: "orderable-dragging", mouseDrag: "orderable-dragging", hover: "orderable-hover", dropMarker: "orderable-drop-marker", avatar: "orderable-avatar" }; |
|
a function that returns a valid DOM node to be used as the dragging avatar |
|
The item being dragged will be cloned |
|
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) |
|
the ID of the element containing any instructional messages |
|
"message-bundle:" |
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/Reorderer.js"></script>