Version 1.7 glow.dragdrop.Draggable
API Quick Reference
JavaScript is required to use the quick reference
An element that can be dragged using the mouse.
Further Info & Examples
Constructor
new glow.dragdrop.Draggable(element, opts)-
Parameters
- element
-
- Type
- | | 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
- 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
- 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 | | glow.dom.NodeList
- Optional
- Yes
- dragPrevention
-
Disables dragging from the specified array of element names
- Type
- 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
- Optional
- Yes
Specifies which DropTargets this draggable is associated with.
- handle
-
Restrict the drag 'handle' to an element within the draggable.
- Type
- Selector | | glow.dom.NodeList
- Optional
- Yes
- onAfterDrop
-
An event listener that fires after the element has dropped, including any animations
- Type
- 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
- Optional
- Yes
- onDrop
-
An event listener that fires when the draggable is dropped.
- Type
- Optional
- Yes
- onEnter
-
An event listener that fires when the draggable is dragged over a drop target.
- Type
- Optional
- Yes
- onLeave
-
An event listener that fires when the draggable is dragged out of a drop target.
- Type
- Optional
- Yes
- placeholder
-
Defines what to leave in place of the draggable whilst being dragged.
- Type
- 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
- 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
- |
- 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
- Type
- glow.dom.NodeList
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
