Advanced Reorderer API - v0.5
This documentation refers to version 0.5 of the Reorderer code. For documentation specific to trunk, please see Advanced Reorderer API.
options
The options parameter is an optional collection of name-value pairs that configure the Reorderer:
Selectors
Name | Description | Values |
|---|---|---|
| an object containing CSS-based selectors for various parts of the Reorderer |
Listeners
General options
Advanced options
CSS Classes
The Reorderer applies CSS classes to orderable items, and updates them as they are moved. These classes can be used to apply visual cues to the various states of the orderable items. The class names are configurable. The default class names are:
orderable-default - This class is applied to elements in their default state.
orderable-selected - This class is applied to the element that has been selected. The selected item can then be moved using keystrokes.
orderable-hover - This class is applied to orderable elements when the mouse hovers over them.
orderable-dragging - This class is applied to the orderable element that is currently being moved using the keyboard.
orderable-dragging - This class is also applied to the orderable element that is currently being moved using the mouse.
orderable-avatar - This class is applied to the avatar, which defaults to the image of the orderable element as it is being dragged about by the mouse.
orderable-drop-marker - This class is applied to the drop target indicator when the mouse is used to drag an item.
Dependencies
The 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>