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