Version 1.7 glow.dragdrop.DropTarget
API Quick Reference
JavaScript is required to use the quick reference
An element that can react to Draggables.
Further Info & Examples
Constructor
new glow.dragdrop.DropTarget(element, opts)Parameters
- element
- Type
- String | Element | glow.dom.NodeList
The element or CSS selector for an element to be made droppable.
If a NodeList or CSS selector matching multiple elements is passed only the first element is made droppable.
- 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.
- dropIndicator
Whether to create an element when a Draggable is over the DropTarget.
- Type
- String
- Default
- none
- Optional
- Yes
Possible values for this param are:
- spacer
- an empty div will be added to the drop target to indicate where the Draggable will be dropped.
- none
- no drop indicator will be created.
- dropIndicatorClass
The class apply to the dropIndicator element.
- Type
- String
- Default
- glow-dragdrop-dropindicator
- Optional
- Yes
This is useful if you want to style the drop indicator.
- onActive
An event listener to fire when an associated Draggable starts being dragged.
- Type
- Function
- Optional
- Yes
- onDrop
An event listener to fire when an associated Draggable is dropped on the drop target.
- Type
- Function
- Optional
- Yes
- onEnter
An event listener to fire when an associated Draggable is dragged over the drop target.
- Type
- Function
- Optional
- Yes
- onInactive
An event listener to fire when an associated Draggable stops being dragged.
- Type
- Function
- Optional
- Yes
- onLeave
An event listener to fire when an associated Draggable is dragged out of the drop target.
- Type
- Function
- Optional
- Yes
- tolerance
The point at which the target becomes active when a draggable moves over it.
- Type
- String
- Default
- intersect
- Optional
- Yes
Possible values for this param are:
- intersect
- The target becomes active as soon as any part of the draggable is over the target.
- cursor
- The target becomes active when the cursor is over the target.
- contained
- The target only becomes active once the whole draggable is within the target.
Examples
var myDropTarget = new glow.dragdrop.DropTarget('#dropTarget', { onActive: function(e){ this.element.css('border', '2px solid blue'); }, onInactive: function(e){ this.element.css('border', ''); this.element.css('opacity', '1'); }, onEnter: function(e){ this.element.css('opacity', '0.2'); }, onLeave: function(e){ this.element.css('opacity', '1'); }, onDrop: function(e){ this.element.css('backgroundColor', 'green'); } });
Properties
- element
glow.dom.NodeList containing the draggable element
Events
- active
Fired when a draggable linked to this drop target starts being dragged.
Synopsis
glow.events.addListener(myDropTarget, "active", function(event) { // ... });Arguments
- event
Event Object
- inactive
Fired when a draggable linked to this drop target stops dragging.
Synopsis
glow.events.addListener(myDropTarget, "inactive", function(event) { // ... });Arguments
- event
Event Object
- enter
Fired when a draggable linked to this drop target is dragged over the target.
Synopsis
glow.events.addListener(myDropTarget, "enter", function(event) { // ... });Arguments
- event
Event Object
- leave
Fired when a draggable linked to this drop target is dragged out of the target.
Synopsis
glow.events.addListener(myDropTarget, "leave", function(event) { // ... });Arguments
- event
Event Object
- drop
Fired when a draggable linked is dropped on this drop target.
Synopsis
glow.events.addListener(myDropTarget, "drop", function(event) { // ... });Arguments
- event
Event Object
