Version 1.5 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 | String | HTMLElement[]
The container or containers of the items to be made sortable.
- opts
- Type
- Object
- Optional
- Yes
A set of named options (see below).
- axis
Restrict dragging to a particular axis
- Type
- String
- Optional
- Yes
- constrainDragTo
Limit the dragging to within a specific element
- Type
- glow.dom.NodeList | String
- Optional
- Yes
- draggableOptions
An options object to apply to each draggable.
- dropIndicatorClass
The name of the class to apply to the element that indicates where an item will be dropped.
- Type
- String
- Default
- glow-sortable-dropindicator
- Optional
- Yes
- equaliseColumns
Make the bottom of each container the same.
- Type
- Boolean
- 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
- Function
- Optional
- Yes
Properties
- containers
The elements that contain the sortable items.
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 | String | Element[]
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
Event Object
