here is my beautiful example
<html><head>
<style type="text/css">
..drag{
position:relati ve;
cursor:move;
z-index: 100;
}
</style>
<script type="text/javascript">
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null,
dragapproved : 0,
initialize:func tion(){
document.onmous edown=this.drag
document.onmous eup=function(){ this.dragapprov ed=0}
},
drag:function(e ){
var evtobj=window.e vent? window.event : e
this.targetobj= window.event? event.srcElemen t : e.target
if (this.targetobj .className=="dr ag"){
this.dragapprov ed=1
if
(isNaN(parseInt (this.targetobj .style.left))){ this.targetobj. style.left=0}
if
(isNaN(parseInt (this.targetobj .style.top))){t his.targetobj.s tyle.top=0}
this.offsetx=pa rseInt(this.tar getobj.style.le ft)
this.offsety=pa rseInt(this.tar getobj.style.to p)
this.x=evtobj.c lientX
this.y=evtobj.c lientY
if (evtobj.prevent Default)
evtobj.preventD efault()
document.onmous emove=dragobjec t.moveit
}
},
moveit:function (e){
var evtobj=window.e vent? window.event : e
if (this.dragappro ved==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.init ialize()
function getPosition(ev) {
ev = ev || window.event;
var mousepos = getMouseCoords( ev)
if(mousepos.y < posTop()+50){
pageScrollUp(mo usepos.y,ev)
}
}
function getMouseCoords( ev){
if(ev.pageX || ev.pageY){
return{x:ev.pag eX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.s crollLeft - document.body.c lientLeft,
y:ev.clientY + document.body.s crollTop - document.body.c lientTop
};
}
function posTop(){
return typeof window.pageYOff set != 'undefined' ? windowPageYOffs et :
document.docume ntElement
&& document.docume ntElement.scrol lTop ?
document.docume ntElement.scrol lTop : document.body.s crollTop ?
document.body.s crollTop : 0;
}
function pageScrollUp(mo usePosY,ev){
window.scrollBy (0,-80);
var d = document.getEle mentById('myDiv ');
ev = ev || window.event;
var mousepos = getMouseCoords( ev);
d.style.top = (mousePosY - 80)+'px';
}
</script>
</head><body>
<h1>Test test</h1><h1>Test test test</h1><h1>Test test test
test</h1><h1>Test test test test test</h1>
<h1>Test test test test test test</h1><h1>Test test test test
test</h1><h1>Test test test test</h1>
<h1>Test test test</h1><h1>Test test</h1><h1>Test test</h1><h1>Test
test test</h1><h1>Test test test test</h1>
<h1>Test test test test test</h1>
<div id="myDiv" class="drag" style="border:b lue solid
1px;background-color:lightyell ow;width:100px; "
onMouseMove='ge tPosition();'>D rag Me<br>Anywhere</div>
<h1>Test test</h1><h1>Test test test</h1><h1>Test test test
test</h1><h1>Test test test test test</h1>
<h1>Test test test test test test</h1><h1>Test test test test
test</h1><h1>Test test test test</h1>
<h1>Test test test</h1><h1>Test test</h1><h1>Test test</h1><h1>Test
test test</h1><h1>Test test test test</h1>
<h1>Test test test test test</h1>
</body></html>
