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

An element that can be dragged using the mouse.

Further Info & Examples

Constructor

new glow.dragdrop.Draggable(element, opts)

Parameters

element
Type
String | Element | glow.dom.NodeList

The element or CSS selector for an element to be made draggable.

If a NodeList or CSS selector matching multiple elements is passed only the first element is made draggable.

opts
Type
Object
Optional
Yes

An object of options.

The opts object allows you to pass in functions to use as event listeners. This is purely for convenience, you can also use glow.events.addListener to add them the normal way.

axis

Restrict dragging to an axis.

Type
String
Optional
Yes

Possible values for this param are:

x
Restricts dragging to the x-axis
y
Restricts dragging to the y-axis
container

Constrain dragging to within the bounds of the specified element.

Type
Selector | Element | glow.dom.NodeList
Optional
Yes
dragPrevention

Disables dragging from the specified array of element names

Type
String[]
Default
input, textarea, button, select, option, a
Optional
Yes

By default dragging will not work when the user clicks in form elements, otherwise these elements would be unusable.

dropTargets

An array of DropTargets.

Type
Array
Optional
Yes

Specifies which DropTargets this draggable is associated with.

handle

Restrict the drag 'handle' to an element within the draggable.

Type
Selector | Element | glow.dom.NodeList
Optional
Yes
onAfterDrop

An event listener that fires after the element has dropped, including any animations

Type
Function
Optional
Yes

The default action is to animate the draggable back to it's start position. This can be cancelled by returning false from the listener or calling glow.events.Event.preventDefault on the glow.events.Event param.

onDrag

An event listener that fires when the draggable starts being dragged.

Type
Function
Optional
Yes
onDrop

An event listener that fires when the draggable is dropped.

Type
Function
Optional
Yes
onEnter

An event listener that fires when the draggable is dragged over a drop target.

Type
Function
Optional
Yes
onLeave

An event listener that fires when the draggable is dragged out of a drop target.

Type
Function
Optional
Yes
placeholder

Defines what to leave in place of the draggable whilst being dragged.

Type
String
Default
spacer
Optional
Yes

Possible values for this param are:

spacer
an empty div is created where the draggable started.
clone
an exact clone of the original element.
none
no placeholder will be created.
placeholderClass

A class be applied to the placeholder element.

Type
String
Default
glow-dragdrop-placeholder
Optional
Yes

This can be used to to add styling for indicating where the element has been dragged from, add opacity, etc.

step

The pixel interval the draggable snaps to.

Type
Number | Object
Default
1
Optional
Yes

If a number, the draggable will step by that number of pixels on the x and y axis. You can provide an object in the form {x:2, y:4} to set different steps to each axis.

Examples

// create a draggable element with a corresponding DropTarget,
// container and two event listeners
var myDraggable = new glow.dragdrop.Draggable('#draggable', {
  dropTargets : [ myDropTarget ],
  container : '#container',
  onDrag : function () {
    this.element.css('opacity', '0.7');
  },
  onDrop : function () {
    this.element.css('opacity', '1');
  }
});

Properties

element

glow.dom.NodeList containing the draggable element

Events

drag

Fired when the draggable starts being dragged.

Synopsis

glow.events.addListener(myDraggable, "drag", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

Concelling this event results in the user being unable to pick up the draggable.

enter

Fired when the draggable is dragged over a drop target.

Synopsis

glow.events.addListener(myDraggable, "enter", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

leave

Fired when the draggable is dragged out of a drop target.

Synopsis

glow.events.addListener(myDraggable, "leave", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

drop

Fired when the draggable is dropped.

Synopsis

glow.events.addListener(myDraggable, "drop", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

afterDrop

Fired after the element has dropped, including any animations

Synopsis

glow.events.addListener(myDraggable, "afterDrop", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Documentation generated by JsDoc Toolkit 2.1.0 on Thu Jul 07 2011 12:47:28 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.