³ÉÈËÂÛ̳

Overview

With the Glow DragDrop module you are able to create dragTargets from elements which can then be specified as targets for draggables. Note, it will be easier to understand dragTargets if you read the draggable api and draggable userdocs first.

Using dragTargets

dragTargets are used in conjunctions are usually passed as part of the options object when a draggable is creating.

A simple dragTarget

If you do not specify an onDrop function for the dropTarget nothing will happen to the dropTarget when something is dropped on it. In this example some text is added to the dropTarget when a draggable is dropped onto it. Note that when a dropTarget is specified, the default behavior is for the draggable to return to it's original position when it is dropped.

HTML

<div id="ex1">
    <div id="draggable1">Drag me</div>
    <div id="target1"><h4>Drop Target</h4></div>
</div>

Javascript

var dropTarget1 = new glow.dragdrop.DropTarget('#target1', {
    onDrop: function () {
        this.element.append(glow.dom.create("<p>I've been dropped on</p>"));
    }
});
new glow.dragdrop.Draggable('#draggable1', { dropTargets : [dropTarget1] });

CSS

#draggable1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
}

#target1 {
    width: 200px;
    height: 200px;
    background-color: green;
    float: right;
    color: #fff;
}

#ex1 {
    height: 250px;
}

Example

onActive, onInactive, onEnter, onLeave

HTML

<div id="ex2">
  <div id="draggable2">Drag me</div>

  <div id="targets2">
    <div id="target2a">
        <h4>Drop Target 2a</h4>
    </div>

    <div id="target2b">
      <h4>Drop Target 2b</h4>
    </div>
  </div>
</div>

Javascript

var target2a = new glow.dragdrop.DropTarget('#target2a', {
    dropIndicator : 'none',
    onDrop: function () {
        this.element.append(glow.dom.create("<p>I've been dropped on</p>"));
        this.element.css('opacity', '');
    },
    onActive: function () {
		this.element.css('border', '2px solid red');
    },
    onInactive: function () {
		this.element.css('border', '');
    },
    onEnter: function () {
        this.element.css('opacity', '0.7');
    },
    onLeave: function () {
        this.element.css('opacity', '');
    }
});

var target2b = new glow.dragdrop.DropTarget('#target2b', {
    dropIndicator : 'none',
    onDrop: function () {
        this.element.append(glow.dom.create("<p>I've been dropped on</p>"));
        this.element.css('opacity', '');
    },
    onActive: function () {
		this.element.css('border', '2px solid red');
    },
    onInactive: function () {
		this.element.css('border', '');
    },
    onEnter: function () {
        this.element.css('opacity', '0.7');
    },
    onLeave: function () {
        this.element.css('opacity', '');
    }
});

new glow.dragdrop.Draggable('#draggable2', {
    dropTargets : [target2a, target2b]
});

CSS

#ex2 {
	height: 460px;
}

#draggable2 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px;
	position: absolute;
}

#targets2 div {
    width: 200px;
    height: 200px;
    color: #fff;
    background-color: green;
    border: 2px solid green;
    margin-bottom: 10px;
    float: right;
}

#target2b {
    clear: right;
}

Example

Getting a draggable to interact with the DropTarget

You will often want the draggable to interact with the DropTarget when it is dropped on it.

HTML

<div id="ex3">

  <div id="draggable3">Drag me</div>

  <div id="targets3">
    <div id="target3">
      <h4>Drop Target 3</h4>
    </div>
  </div>
</div>

Javascript

var target3 = new glow.dragdrop.DropTarget('#target3', {
    onDrop: function (e) {
        this.element.css('background-color', 'blue');
    }
});

new glow.dragdrop.Draggable('#draggable3', {
    dropTargets : [ target3 ],
    onDrop : function (e) {
        if (this.activeTarget) {
            this.element.appendTo(this.activeTarget.element);
			e.preventDefault();
        }
    }
});

CSS

#ex3 {
	height: 250px;
}

#draggable3 {
    width: 100px;
    height: 100px;
    background-color: red;
}

#target3 {
    width: 200px;
    height: 200px;
    background-color:green;
    float: right;
    color: #fff;
    border:2px solid white;
}

Example

Changing the tolerance of the target

Changing the tolerance of the target changes the point when the target becomes active. By default the draggable is considered over the target when it's box intesects with that of a target. You can set the tolerance of the draggable to "contained" to make it so that it is only considered over the target when it's box is entirely contained by that of the drop target. Alternatively, you can set it to "pointer" to make it so that it is only considered over the target when the mouse pointer is within the drop target.

HTML

<div id="ex4">

  <div id="draggable4">Drag me</div>

  <div id="targets4">
    <div id="target4-contained">
      <h4>Draggable must be contained</h4>
    </div>
    <div id="target4-pointer">
      <h4>Mouse pointer must be over</h4>
    </div>
  </div>
</div>

Javascript

var containedTarget = new glow.dragdrop.DropTarget('#target4-contained', {
	tolerance: 'contained',
	dropIndicator: 'none',
	onEnter: function () {
		this.element.css('background-color', 'blue');
    },
	onLeave: function () {
		this.element.css('background-color', 'green');
	},
	onDrop: function () {
		this.element.css('background-color', 'green');
	}
});

var pointerTarget = new glow.dragdrop.DropTarget('#target4-pointer', {
	tolerance: 'cursor',
	dropIndicator: 'none',
	onEnter: function () {
		this.element.css('background-color', 'blue');
    },
	onLeave: function () {
		this.element.css('background-color', 'green');
	},
	onDrop: function () {
		this.element.css('background-color', 'green');
	}
});

new glow.dragdrop.Draggable('#draggable4', {
    dropTargets : [ containedTarget, pointerTarget ]
});

CSS

#ex4 {
	height: 340px;
}

#draggable4 {
    width: 100px;
    height: 100px;
    background-color: red;
}

#target4-contained, #target4-pointer {
    width: 200px;
    height: 200px;
    background-color: green;
    float: right;
    color: #fff;
    border: 2px solid white;
}

Example

For a complete listing of methods and properties, Refer to the API.