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 is based around the DynLayer. You simply add DynLayers to the Drag Object to make them draggable, and remove them from the drag object to make them static again.

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 (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
function mouseDown(e) {
	if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
	var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
	var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
	if (drag.mouseDown(x,y)) {
		// put more code here to do something else when starting a drag
		return false
	}
	else return true
}
function mouseMove(e) {
	var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
	var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
	if (drag.mouseMove(x,y)) {
		// put more code here to do something else while dragging
		return false
	}
	else return true
}
function mouseUp(e) {
	var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
	var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
	if (drag.mouseUp()) {
		// put more code here to do something else when finished a drag
		return false
	}
	else return true
}

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 add them separately. As soon as they're added they will become draggable, this can be done at any time after the page has been loaded. 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")
	red = new DynLayer("redDiv")
	green = new DynLayer("greenDiv")
	purple = new DynLayer("purpleDiv")

	// add the draggable layers to the drag object
	drag.add(bluered,green,purple)
	
	// initialize mouse events
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp
	if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

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

Extra Functionality

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

resort Property:

The resort property determines whether the layer that is being dragged will be layered on top of all the other layers. By default, when you click a draggable layer the Drag Object will make the z-index of that layer higher than all the rest. This may not be what you want, so you can turn it off by calling:

drag.resort = false

setGrab() Method:

The setGrab() method allows for only a portion of the layer to be "grabbable", this allows for draggable toolbars, or window-like layers (see DynWindow Object).

drag.setGrab(dynlayer,top,right,bottom,left)

This method is entirely optional, if you don't call it the entire layer will be "grabbable"

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.

Source Code

Download: drag.js
View Source: drag.js

View dragobject1.html for a drag object example.

Home Next Lesson: Creating and Destroying Layers
copyright 1998 Dan Steinman


Casa de Bender