<script type="text/javascript">
var moz=document.getElementById&&!document.all
var moving = false
var tempX = 0
var tempY = 0
var dex=""
function dragMe(obj) {
el = document.getElementById(obj.id)
if(dex!=""){
dex.style.zIndex = ""
}
moving=true
posX = tempX - el.offsetLeft
posY = tempY - el.offsetTop
el.style.zIndex = 1
dex=el
}
function moveTo(e) {
tempX = (!moz ? event.clientX : e.clientX)
tempY = (!moz ? event.clientY : e.clientY)
if(moving == true) {
el.style.left = (tempX - posX) + "px"
el.style.top = (tempY - posY) + "px"
}
}
document.onmousemove = moveTo
document.onmouseup=new Function("moving=false")
</script>
<style>
#div1{
position:absolute;
top:100px;
left:50px;
height:100px;
width:100px;
background:#00FF00;
}
#div2{
position:absolute;
top:100px;
left:200px;
height:100px;
width:100px;
background:#FFFF00;
}
#div3{
position:absolute;
top:100px;
left:350px;
height:100px;
width:100px;
background:#FF0000
}
#div4{
position:absolute;
top:100px;
left:500px;
height:100px;
width:100px;
background:#0000FF
}
</style>
<div id="div1" onmousedown="dragMe(this)">1</div>
<div id="div2" onmousedown="dragMe(this)">2</div>
<div id="div3" onmousedown="dragMe(this)">3</div>
<div id="div4" onmousedown="dragMe(this)">4</div>
<script type="text/javascript">
<!--
isDragging = false
lastObj = null
function initDrag(e){
if(!e){
evtX=event.clientX
evtY=event.clientY
mButton=event.button
obj=event.srcElement
}
else{
evtX=e.pageX
evtY=e.pageY
mButton=e.which
obj=e.target
}
// only drag if left mouse button and class name is dragme
if(/1/.test(mButton) && /dragme/.test(obj.className)){
isDragging=true
X_offset=evtX-parseInt(obj.style.left)
Y_offset=evtY-parseInt(obj.style.top)
obj.style.zIndex = 1
if(lastObj!=null&&obj!=lastObj){
lastObj.style.zIndex=""
}
lastObj = obj
document.onmousemove=dragElement
}
}
function dragElement(e){
if(!isDragging){return true}
obj.style.left=(!e?event.clientX:e.pageX)-X_offset
obj.style.top=(!e?event.clientY:e.pageY)-Y_offset
return false
}
document.onmouseup=new Function("isDragging=false")
document.onmousedown=initDrag
// -->
</script>
<img class="dragme" src="pic1.jpg"style="position:absolute;top:0px;left:0px;cursor:hand">
<DIV class="dragme" style="position:absolute;top:100px;left:0px;cursor:hand;background-color:red">Hello World</DIV>