Drag 'n' Drop 2

See also Drag 'n' Drop 1
Hold your left mouse button down anywhere in this box to drag.
This example uses a single DIV whose opening tag includes class="drag" and onmousedown="dragMe(event,this.id)"
Header
You can move this box by holding your left mouse button down in the header area above.
The following examples header and/or footer opening tags include class="drag" and onmousedown=
"dragMe(event,this.offsetParent.id)"
Header
You will be able to move this box when your left mouse button is held down in the header area above and the footer area below.
Footer
Header
Header
Footer
Header
Footer
The basic idea is that whichever tag includes the class name drag, and the mouse event onmousedown="dragMe(event,this.offsetParent.id)" will initiate the dragging of the container div, with exception to the first example whose mouse event is onmousedown="dragMe(event,this.id)". 

<HTML>
<HEAD>
<TITLE>Drag 'n' Drop</TITLE>

<script type="text/javascript">

moz=document.getElementById&&!document.all
id=null
lastid=null

function dragMe(e,ID){
id=ID
if (!moz&&event.srcElement.className.indexOf("drag")!=-1||moz&&e.target.className.indexOf("drag")!=-1){
curposx=(!moz ? event.clientX : e.clientX) // Cursorx Start Position
curposy=(!moz ? event.clientY : e.clientY) // Cursory Start Position
objectx=document.getElementById(id).offsetLeft // Objectx Start Position
objecty=document.getElementById(id).offsetTop // Objecty Start Position
document.getElementById(id).style.zIndex=5
if(lastid!=null&&lastid!=id){
document.getElementById(lastid).style.zIndex=''
}
moving=true
document.onmousemove=moveTo
}
}

function moveTo(e){
xx=(!moz ? event.clientX : e.clientX) // Cursorx Current Position
yy=(!moz ? event.clientY : e.clientY) // Cursory Current Position
if (moving==true){
document.getElementById(id).style.left=xx-(curposx-objectx) // Objectx Current Position
document.getElementById(id).style.top=yy-(curposy-objecty) //Objecty Current Position
return false
}
}

//document.onmousedown=dragMe
document.onmouseup=new Function("moving=false;lastid=id")

</script>

<style>
.header{
width:100%;
color:#55FFAA;
text-align:center;
margin-top:5px;
padding-bottom:5px;
border-bottom:1px solid #AAAA55;
}

.footer{
width:100%;
color:#FFAA55;
text-align:center;
padding-top:3px;
margin-bottom:3px;
border-top:1px solid #AAAA55;
}

.drag{
cursor:move;
}

</style>

</HEAD>
<BODY>
<h1>Drag 'n' Drop</h1>
Hold your left mouse button down to drag.
<BR><BR>
<DIV id="container1" class="drag" style="position:absolute;left:20px;top:110px;width:250px;border:1px solid #A050F0;background-color:#000000;color:#55AAFF" onmousedown="dragMe(event,this.id)">
Hold your left mouse button down anywhere in this box to drag.<br>
This example uses a single DIV whose opening tag includes <span class="drag" style="color:#FF55AA">class="drag"</span> and <span class="drag" style="color:#FF55AA">onmousedown="dragMe(event,this.id)"</span>
</DIV>

<DIV id="container2" style="position:absolute;left:290px;top:110px;width:200px;border:1px solid #A050F0;background-color:#000000;color:#55AAFF">
<div class="header drag" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Header</div>
You will be able to move this box when your left mouse button is held down in the header area above.
</DIV>

<DIV id="container3" style="position:absolute;left:510px;top:110px;width:200px;border:1px solid #A050F0;background-color:#000000;color:#55AAFF">
<div class="header drag" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Header</div>
You will be able to move this box when your left mouse button is held down in the header area above and the footer area below.
<div class="footer drag" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Footer</div>
</DIV>

<DIV id="container4" style="position:absolute;left:20px;top:300px;width:250px;border:1px solid #A050F0;background-color:#000000">
<div class="header drag" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Header</div>
<img src="pic1.jpg" width="250" height="150" border="0">
</DIV>

<DIV id="container5" style="position:absolute; left:290px;top:300px;width:200px;border:1px solid #A050F0;background-color:#000000">
<div class="header drag" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Header</div>
<img src="pic2.jpg" width="200" height="150" border="0">
<div class="footer" title="Non Dragable Footer">Footer</div>
</DIV>

<DIV id="container6" style="position:absolute;left:510px;top:300px;width:200px;border:1px solid #A050F0;background-color:#000000">
<div class="header drag" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Header</div>
<img src="pic3.jpg" width="200" height="150" border="0">
<div class="footer drag" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Footer</div>
</DIV>

</BODY>
</HTML>