Drag 'n' Drop 1

See also Drag 'n' Drop 2

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


Drag 'n' Drop 1b

With the following example simply put "dragme" as a class name in the element and that element will drag.


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