Drag Object

The Drag Object is a unified piece of code which allows you to selectively make Dynamic Layers draggable with a minimal amount of coding. All that's needed is to set up the drag.js file, initialize your DynLayers, and then add them to the drag object.

Setting Up The Script

The Drag Object should generally be in it's own .js file which you can include in any pages which use it. You must also include the base Dynamic Layer Object in those files as well since the Drag Object can only accept DynLayers.


<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js">// DynLayer is required</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" SRC="drag.js"></SCRIPT>

The Drag Object code will automatically intialize a generic "drag" object which is the default (you don't have to insert this code):


drag = new Drag()

However, being that this is an object you could create multiple drag objects to define different groups of draggable layers.

You must send the drag object(s) the mouse coordinates from each of the mouseDown(), mouseMove() and mouseUp() functions. Here's how to set that up:


function init() {

	// initialize DynLayers here

	

	// initialize mouse events

	document.onmousedown = mouseDown

	document.onmousemove = mouseMove

	document.onmouseup = mouseUp

	if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

}



function mouseDown(e) {

	if ((ns4 && e.which == 1) || ie4) {

		var x = (ns4)? e.pageX : event.x

		var y = (ns4)? e.pageY : event.y+document.body.scrollTop

		drag.mouseDown(x,y)

		if (drag.active) {

			// put more code here to do something else when starting a drag

			return false

		}

	}

}

function mouseMove(e) {

	var x = (ns4)? e.pageX : event.x

	var y = (ns4)? e.pageY : event.y+document.body.scrollTop

	if (drag.active) {

		drag.mouseMove(x,y)

		return false

	}

}

function mouseUp(e) {

	var x = (ns4)? e.pageX : event.x

	var y = (ns4)? e.pageY : event.y+document.body.scrollTop

	drag.mouseUp()

	if (drag.active) {

		// put more code here to do something else when finished a drag

		return false

	}

}

The next step is for you to initialize your DynLayers, and add those layers to the drag object. The Drag Object's add() method is what you use to make your layers draggable. The usage is pretty simple:


drag.add(dynlayer1, dynlayer2, etc...)

Where dynlayer1, dynlayer2, etc... is the names of your DynLayers. The method will accept any number of DynLayers in a row, or you can call them separately. As soon as they're added they will become draggable. The following init() function will make each of the DynLayers draggable as soon as the page is finished loading:


function init() {

	// initialize DynLayers

	blue = new DynLayer("blueDiv",null)

	red = new DynLayer("redDiv",null)

	green = new DynLayer("greenDiv",null)

	purple = new DynLayer("purpleDiv",null)



	// add the draggable layers to the drag object

	drag.add(blue,red,green,purple)

	

	// initialize mouse events

	document.onmousedown = mouseDown

	document.onmousemove = mouseMove

	document.onmouseup = mouseUp

	if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

}

That's all that's necessary to get your drag and drop layers working.

Extra Functionality

I've included a few other methods to the Drag Object that will make it easier to implement it into some other application.

remove() Method:

You can remove a DynLayer from the Drag Object, and therefore making it no-longer draggable, by using the remove() method. It's syntax is the same as the add() method:


drag.remove(dynlayer1, dynlayer2, etc...)

checkWithin() Function:

The checkWithin() function can be used to check if a particular coordinate is with a certain boundary. This function is used by the Drag Object to determine when a layer has been clicked on. But it can also be used for other things such as determining if you've dropped the object onto a particular area of the page.

To use the checkWithin() function you need a test coordinate (x and y) and you compare that to 4 other values (left,right,top,bottom) which represent a square portion of the page:


checkWithin(x,y,left,right,top,bottom)

The x and y values would most likely be the coordinates from one of the mouse functions.

Drag Object Source Code


// Drag Object

// Copyright 1998 Dan Steinman

// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)

// June 5 1998.  Last Updated July 23, 1998.

// In order to use this code you must keep this disclaimer



ns4 = (document.layers)? true:false

ie4 = (document.all)? true:false



function Drag() {

	this.obj = null

	this.array = new Array()

	this.active = false

	this.offsetX = 0

	this.offsetY = 0

	this.zIndex = 0

	this.resort = true

	this.add = DragAdd

	this.remove = DragRemove

	this.mouseDown = DragMouseDown

	this.mouseMove = DragMouseMove

	this.mouseUp = DragMouseUp

}

function DragAdd() {

	for (var i=0; i<arguments.length; i++) {

		this.array[this.array.length] = arguments[i]

		this.zIndex += 1

	}

}

function DragRemove() {

	for (var i=0; i<arguments.length; i++) {

		for (var j=0; j<this.array.length; j++) {

			if (this.array[j]==arguments[i]) {

				for (var k=j;k<=this.array.length-2;k++) this.array[k] = this.array[k+1]

				this.array[this.array.length-1] = null

				this.array.length -= 1

				break

			}

		}

	}

}

function DragMouseDown(x,y) {

	for (var i=this.array.length-1;i>=0;i--) {

		var lyr = this.array[i]

		if (checkWithin(x,y,lyr.x,lyr.x+lyr.w,lyr.y,lyr.y+lyr.h)) {

			this.obj = this.array[i]

			this.offsetX = x-this.obj.x

			this.offsetY = y-this.obj.y

			this.active = true

			break

		}

	}

	if (this.active && this.resort) {

		this.obj.css.zIndex = this.zIndex++

		for (var j=i;j<=this.array.length-2;j++) this.array[j] = this.array[j+1]

		this.array[this.array.length-1] = this.obj

	}

}

function DragMouseMove(x,y) {

	if (this.active) {

		this.obj.moveTo(x-this.offsetX,y-this.offsetY)

	}

}

function DragMouseUp() {

	drag.active = false

}



// automatically define the "drag" object

drag = new Drag()



// checkWithin() function is required

function checkWithin(x,y,left,right,top,bottom) {

	if (x>=left && x<right && y>=top && y<bottom) return true

	else return false

}

View dragobject1.html for a drag object example.

Home Next Lesson: Changing Images
copyright 1998 Dan Steinman