´óÏó´«Ã½

Overview

The glow.dragdrop module provides simple but fully customisable methods for making elements dragable and providing drop targets that Draggables can be dropped on to.

Using the Dragdrop module

Styling Draggables

When an element is Dragged, it's css "display" property is automatically set to "absolute" so that it can be moved around the page by changing its "top" and "left" values. This should be taken into consideration when you are styling your page, as removing the element from the document flow could cause disruption to the page.

Simple Draggable

HTML

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

Javascript

new glow.dragdrop.Draggable('#drag1');

CSS

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

Example

Placeholder - Controlling what gets left behind

Spacer placeholder

To leave a space where the dragged element was, set the 'placeholder' option to 'spacer'. Glow will size the spacer element so that when the dragged element is absolutely positioned, the surrounding content will not move. The "placeholerClass" option allows you to specify a class for the spacer element (the default is 'glow-dragdrop-placeholder').

HTML

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

Javascript

new glow.dragdrop.Draggable('#drag2', {
    placeholderClass : 'myspacer'
});

CSS

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

.myspacer {
    border: 2px dotted blue;
}

Example

Limit Dragging to within a Container

To constrain where an element can be dragged, use the "container" attribute when creating the Draggable.

HTML

<div id="democontainer">
    <div id="d3">Drag me</div>
</div>

Javascript

var myDraggable2 = new glow.dragdrop.Draggable('#d3', {
    container : '#democontainer'
});

CSS

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

#democontainer {
    height: 200px;
    width: 400px;
    border: 2px dotted blue;
}

Example

Adding a handle to draggable

By default you can drag a dragabble element by clicking on any part of that element. Sometimes you may only want the element to be dragged if you click on a certain part of it. To specify a sub element that the mouse must be over when initiating dragging, use the "handle" option when creating your Draggable.

HTML

<div id="d4">
    <h4>This header is a handle</h4>
</div>

Javascript

new glow.dragdrop.Draggable('#d4', {
    handle : 'h4'
});

CSS

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

#d4 h4 {
    background-color: blue;
    color: white;
    /* remove margin here because when you start to drag it is no longer collapsed with container */
    margin: 0;
    cursor: move;
}

Example

Restricting Draggable to an axis

Sometimes you may want to restrict movement of a Draggable to one axis. This is done by simply specifying an axis in the options.

HTML

<div id="d5">
    <h4>Drag me</h4>
</div>

Javascript

var myDraggable5 = new glow.dragdrop.Draggable('#d5', {
    axis: 'x'
});

#d5 {
    width: 100px;
    height: 100px;
    background-color: red;
	/* stop margins collapsing, otherwise you will see 'Drag me' heading
	   drop when it switches to position absolute.
	*/
	padding: 1px;
}

Example

Adding event listeners

Events are generated by the Draggable when it starts to drag ("drag" event), when it stops dragging ("drop" event) and when it enters and leaves a DropTarget ("enter" and "leave" events). Listeners can be added and removed using the standard glow.events.addListener and glow.events.removeListener methods, or can be created by passing options to the Draggable constructor.

The default action performed by the "drop" event is to return the draggable to it's original position. To override this, call the "preventDefault" method on the event object or return false from the event listener callback function.

The "enter" and "leave" events provide an extra property "dropTarget" on the event object. This is the glow.dragdrop.DropTarget that the Draggable is entering/leaving. To see the active DropTarget in a listener callback function for the "drop" event, use the "activeTarget" property of the Draggable.

HTML

<div id="d6">
    <h4>Drag me</h4>
</div>

Javascript

new glow.dragdrop.Draggable('#d6', {
    onDrag : function (e) {
        this.element.addClass('active');
    },
    onDrop : function(e){
        this.element.removeClass('active');
        return false;
    }
});

CSS

#d6 {
    width: 100px;
    height: 100px;
    background-color: red;
	/* stop margins collapsing, otherwise you will see 'Drag me' heading
	   drop when it switches to position absolute.
	*/
	padding: 1px;
}

#d6.active {
    background-color: pink;
}

Example