AceJS.com > Script number: 117006

The Script

Drag me! Drag me too! Drag me as well, come on!!

The Source

<HTML>
<HEAD><TITLE>Free Scripts And Tools For Webmasters @ www.AceJS.com</TITLE>
</HEAD>
<BODY>
<FONT FACE="MS Sans serif,Tahoma,Helvetica" SIZE="2">
<style>
#divDrag0{position:absolute; left:0; top:0; height:200; width:200; clip:rect(0,200,200,0); background-color:silver; layer-background-color:silver}
#divDrag1{position:absolute; left:0; top:0; height:200; width:200; clip:rect(0,200,200,0); background-color:red; layer-background-color:red}
#divDrag2{position:absolute; left:0; top:0; height:100; width:100; clip:rect(0,100,100,0); background-color:lime; layer-background-color:lime}
</style>
<script language="JavaScript1.2">
//Browsercheck, and sets <div> for ie, and <layer> for ns
	var n = (document.layers) ? 1:0;
	var ie = (document.all) ? 1:0;
	var layer=(n)?'layer':'div'

/********************************************************************************
Object constructor part.
Setting the objects methods and properties
********************************************************************************/
function dragObj(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'										
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')		
    this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);
	this.getLeft=b_getLeft;
	this.getTop=b_getTop;
	this.moveIt=b_moveIt;
	this.name=obj				
	return this
}
function b_moveIt(x,y){
	this.css.left=x
	this.css.top=y
}
function b_getLeft(){
  	x=(n)? this.css.left:this.css.pixelLeft
	return x
}
function b_getTop(){
  	y=(n)? this.css.top:this.css.pixelTop
	return y
}
/********************************************************************************
Capturing events, when the user mouseovers a layer
the variable/property of that layer names .isOver will
be true, and that means if the user clicks
when he is on top of that layer it becomes draggable
********************************************************************************/
function dragInit(){
	if(n) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP)
	document.onmousedown=mdown
	document.onmouseup=mup
	document.onmousemove=mmove;
}
function mmover(num){
	if(loaded) oDrag[num].isOver=true
}
function mmout(num){
	if(loaded) oDrag[num].isOver=false
}
function mup(){
	for(var i=0; i<oDrag.length;i++){
		if(oDrag[i].isOver) {
			oDrag[i].drag=false
		}	
	}
}
function mdown(num){
	x=(n)?num.pageX:event.x
    y=(n)?num.pageY:event.y
	for(var i=0; i<oDrag.length;i++){
		if(oDrag[i].isOver) {
			oDrag[i].drag=true
			oDrag[i].clickedX=x-oDrag[i].getLeft()
			oDrag[i].clickedY=y-oDrag[i].getTop()
			cZIndex++
			oDrag[i].css.zIndex=cZIndex
		}
	}
}
function mmove(e){
	x=(n)?e.pageX:event.x
    y=(n)?e.pageY:event.y
	for(var i=0; i<oDrag.length;i++){
	if(oDrag[i].drag)
		oDrag[i].moveIt(x-oDrag[i].clickedX,y-oDrag[i].clickedY)
	}
}

/********************************************************************************
Init, here's where you set how many draggable layers you want.
Make one more "Drag[3]=new dragObj('divDrag3')" and as i did here, ++ the number
to add draggable layers. You also have to add them in the stylesheet (in the <style></style>)
To make another one that's sized 100*200 and with a background-color of red add this:
#divDrag3{position:absolute; height:100; width:200; clip:rect(0,200,100,0); background-color:red; layer-background-color:red}
Get the picture?
There's one more thing you have to do to add layers, look further down for explanation.
********************************************************************************/
var loaded; 
function init(){
	dragInit()
	oDrag=new Array()
	oDrag[0]=new dragObj('divDrag0')
	oDrag[1]=new dragObj('divDrag1')
	oDrag[2]=new dragObj('divDrag2')
	loaded=true;
}
/********************************************************************************
Set this variable to the zIndex you want it to start at, (if you have several
layers and want it to start on the top, change to somthing higher then the uppermost layer
********************************************************************************/
cZIndex=10

//Inits the page on page load
if(n || ie) onload=init;
</script>
</HEAD>
<BODY>
<script language="JavaScript1.2">document.write('<'+layer+' id="divDrag0" onmouseover="mmover(0)" onmouseout="mmout(0)">')</script>
	 Drag me!
<script language="JavaScript1.2">document.write('</'+layer+'>')</script>
<script language="JavaScript1.2">document.writeln('<'+layer+' id="divDrag1" onmouseover="mmover(1)" onmouseout="mmout(1)">')</script>
	 Drag me too!
<script language="JavaScript1.2">document.writeln('</'+layer+'>')</script>
<script language="JavaScript1.2">document.writeln('<'+layer+' id="divDrag2" onmouseover="mmover(2)" onmouseout="mmout(2)">')</script>
	Drag me as well, come on!!
<script language="JavaScript1.2">document.writeln('</'+layer+'>')</script>

<P>
<B><A HREF="http://www.AceJS.com">AceJS.com</A> The JavaScript Directory</B>
</BODY>
</HTML>