<!--This example shows you how to implement several draggable objects with one script. For Internet Explorer and Mozilla compliant browsers-->

<html>
<head>
<title> Draggable Objects </title>
<style type="text/css">
/*
Class for the draggable objects. Mandatory properties are:
position: absolute;
z-index: 50 (or higher)

The z-index property is defined in the style attribute
of the objects, because it is not readable when defined
in this class
*/
.dragger_class {
position: absolute;
border: solid black 1px;
padding: 10px;
width: 150px;
height: 150px;
font-family: Verdana;
font-size: 11px
}
</style>
<script language="JavaScript">
// Global variables
var obj, offx, offy;

// Array with the draggable object's names
var draggable = ['dragger1', 'dragger2', 'dragger3'];

// Calculates the current offset used in drag() to keep the mouse pointer
// at the current position in obj
function markOffset (e) {
var cX = e ? e.pageX : event.clientX;
var cY = e ? e.pageY : event.clientY;
if (!obj) return ;
offx = cX - obj.offsetLeft;
offy = cY - obj.offsetTop;
}

// Function that puts id's z-index on top of the other draggable objects
function setIndex (id) {
var this_index, index;
index = document.getElementById(id).style.zIndex = parseInt(document.getElementById(id).style.zIndex) + 1;

for (i in draggable) {
if (draggable[i] != id) {
this_index = parseInt(document.getElementById(draggable[i]).style.zIndex) ;
while(index <= this_index) {
this_index -= 1;
}
document.getElementById(draggable[i]).style.zIndex = this_index;
}
}
}

// Main function
function drag (e) {
var x, y;
if (!obj || obj.style.cursor != 'move') return;
x = e ? e.pageX : event.clientX ;
y = e ? e.pageY : event.clientY ;
obj.style.left = x - offx + 'px';
obj.style.top = y - offy + 'px';
}

// Add event listeners
if (!document.all && document.getElementById) {
document.addEventListener("mousemove", drag, false);
document.addEventListener("mousedown", markOffset, false);
} else {
document.onmousemove = drag;
document.onmousedown = markOffset;
}
</script>
</head>

<body>
<div id="dragger1" style="z-index:50; background-color:red" class="dragger_class"
onmouseover="obj=this"
onmousedown="this.style.cursor = 'move'; setIndex(this.id)"
onmouseup="this.style.cursor = 'default'">
</div>

<div id="dragger2" style="z-index:50; background-color:blue" class="dragger_class"
onmouseover="obj=this"
onmousedown="this.style.cursor = 'move'; setIndex(this.id)"
onmouseup="this.style.cursor = 'default'">
</div>

<div id="dragger3" style="z-index:50; background-color:white" class="dragger_class"
onmouseover="obj=this"
onmousedown="this.style.cursor = 'move'; setIndex(this.id)"
onmouseup="this.style.cursor = 'default'">
</div>
</body>
</html>