Version 1.7 glow.widgets.Sortable
API Quick Reference
JavaScript is required to use the quick reference
Reorder page elements using drag and drop
Further Info & Examples
Constructor
new glow.widgets.Sortable(containers, opts)-
Parameters
- containers
-
- Type
- glow.dom.NodeList | |
The container or containers of the items to be made sortable.
- opts
-
- Type
- Optional
- Yes
A set of named options (see below).
- axis
-
Restrict dragging to a particular axis
- Type
- Optional
- Yes
- constrainDragTo
-
Limit the dragging to within a specific element
- Type
- glow.dom.NodeList |
- Optional
- Yes
- draggableOptions
-
An options object to apply to each draggable.
- Type
- Optional
- Yes
See Draggable for options
- dropIndicatorClass
-
The name of the class to apply to the element that indicates where an item will be dropped.
- Type
- Default
- glow-sortable-dropindicator
- Optional
- Yes
- equaliseColumns
-
Make the bottom of each container the same.
- Type
- Default
- true
- Optional
- Yes
- onSort
-
Create an event listener that is fired when the sortable is sorted - i.e. after one of the draggables has been dragged.
- Type
- Optional
- Yes
Properties
- containers
-
The elements that contain the sortable items.
- Type
- glow.dom.NodeList
Example
var mySortable = new glow.widgets.Sortable('div#sections'); alert(mySortable.containers); // Returns a nodeList of all the sortable items - draggables
-
Array of draggables that can be sorted. Read-only.
- Type
- glow.dragdrop.Draggables[]
Example
var mySortable = new glow.widgets.Sortable('div#sections'); alert(mySortable.draggables); // Returns glow.dragdrop.Draggables[] - dropTargets
-
Array of drop targets that draggable can be dragged to and sorted within. Read-only.
- Type
- glow.dragdrop.DropTargets[]
Example
var mySortable = new glow.widgets.Sortable('div#sections'); alert(mySortable.dropTargets); // Returns glow.dragdrop.DropTargets[]
Methods
- addItems
-
Add items to the sortable.
Synopsis
mySortable.addItems(elements);Parameters
- elements
-
- Type
- glow.dom.NodeList | |
The elements to be added to the sortable.
Description
Should not contain items that are were a child of one of the containers when the sortable was created.
Events
- sort
-
Fired when an item in the sortable has been dragged.
Synopsis
glow.events.addListener(mySortable, "sort", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Event Object
