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

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
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

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.