Version 1.1 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
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 | 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 | NodeList
- Optional
- Yes
- 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
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.
- 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.
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
- enter
Fired when the draggable is dragged over a drop target.
Synopsis
glow.events.addListener(myDraggable, "enter", function(event) { // ... });Arguments
- event
- leave
Fired when the draggable is dragged out of a drop target.
Synopsis
glow.events.addListener(myDraggable, "leave", function(event) { // ... });Arguments
- event
- drop
Fired when the draggable is dropped.
Synopsis
glow.events.addListener(myDraggable, "drop", function(event) { // ... });Arguments
- event
