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
- | | 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
- 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
- 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
- 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
- Optional
- Yes
- onDrop
-
An event listener to fire when an associated Draggable is dropped on the drop target.
- Type
- Optional
- Yes
- onEnter
-
An event listener to fire when an associated Draggable is dragged over the drop target.
- Type
- Optional
- Yes
- onInactive
-
An event listener to fire when an associated Draggable stops being dragged.
- Type
- Optional
- Yes
- onLeave
-
An event listener to fire when an associated Draggable is dragged out of the drop target.
- Type
- Optional
- Yes
- tolerance
-
The point at which the target becomes active when a draggable moves over it.
- Type
- 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
- Type
- glow.dom.NodeList
Events
- active
-
Fired when a draggable linked to this drop target starts being dragged.
Synopsis
glow.events.addListener(myDropTarget, "active", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.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
-
- Type
- glow.events.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
-
- Type
- glow.events.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
-
- Type
- glow.events.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
-
- Type
- glow.events.Event
Event Object
