Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

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.

Type
Object
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
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.

draggables

Array of draggables that can be sorted. Read-only.

Type
glow.dragdrop.Draggables[]
dropTargets

Array of drop targets that draggable can be dragged to and sorted within. Read-only.

Type
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
Type
glow.events.Event
Documentation generated by JsDoc Toolkit 2.1.0 on Mon Jul 06 2009 11:46:36 GMT+0100 (BST)

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.