A simple example...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor| www.pspad.com">
<title></title>
<style type="text/css">
div {width:80%;margin:30px auto;padding:7px;}
#bckgrd {position:relative;height:200px;border:1px solid red;cursor:pointer;}
#frnt {position:relative;width:100px;height:100px;top:-230px;border:30px solid yellow;}
p {margin:3px;}
</style>
</head>
<body>
<div id="pge">
<div id="bckgrd" class="drag">
<p>Lorem ipsum dolor sit amet consectetuer Curabitur turpis urna Nunc orci. Rutrum id risus Cum parturient In tempus mus quis porttitor mauris. Enim nec fames id ligula Nunc Pellentesque tellus convallis nibh Nam. </p>
<p>Aliquam Curabitur auctor auctor eu Pellentesque eleifend mattis augue cursus risus. Eu est fringilla at quis lorem vel nec vitae felis non. Orci euismod Quisque ligula risus feugiat justo tincidunt Vivamus nibh Fusce. At Suspendisse quis.</p>
<p>Urna semper sem Phasellus Curabitur Morbi ligula nulla dolor elit nulla. In morbi id wisi auctor vel elit semper et Maecenas tellus. Integer et fermentum convallis tellus nunc Sed et malesuada Quisque quis. Pellentesque accumsan.</p>
<p>Dis commodo eget ut nec felis Curabitur feugiat ac ut id. Vestibulum Cras et Phasellus ut rutrum dui interdum quis fames justo. Nulla nunc Lorem libero feugiat pellentesque fringilla eleifend Suspendisse commodo feugiat. Pretium augue ridiculus lorem.</p>
</div>
<div id='frnt'></div>
</div>
<script type="text/javascript">
var dragobject={
x:0,y:0,offsetx:null,offsety:null,targetobj:null,dragapproved:0,
initialize:function(){
document.onmousedown=this.drag;
document.onmouseup=function(){this.dragapproved=0}}
,drag:function(e){
var evtobj=window.event? window.event:e;
this.targetobj=window.event? event.srcElement:e.target;
while (this.targetobj.nodeName!='DIV') this.targetobj=this.targetobj.parentNode;
if (this.targetobj.className=="drag"){
this.dragapproved=1;
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX;
this.y=evtobj.clientY;
if (evtobj.preventDefault) evtobj.preventDefault();
document.onmousemove=dragobject.moveit}}
,moveit:function(e){
var evtobj=window.event? window.event:e;
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px";
// this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px";
return false}}
}
dragobject.initialize();
</script>
</body>
</html>