Drag Div and Scroll Page


V

vunet.us

Hello JavaScript experts,
I have a floating div which I drag all over the page. If the page has
scrollbars and users drag the floating div to the very top, page
scrolls up too. The problem occurs at this moment. As page scrolls up,
the div gets detached from the mouse while dragging.
How can I keep the floating div to always stay attached to the mouse
during a dragging process and scrolling the page?
Plug and Play code is a good example of my problem:


<html><head>
<style type="text/css">

..drag{
position:relative;
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: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
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()

function getPosition(ev){
ev = ev || window.event;
var mousepos = getMouseCoords(ev)
if(mousepos.y < posTop()+50){
pageScrollUp(mousepos.y,ev)
}
}
function getMouseCoords(ev){
if(ev.pageX || ev.pageY){
return{x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function posTop(){
return typeof window.pageYOffset != 'undefined' ? windowPageYOffset :
document.documentElement
&& document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop ?
document.body.scrollTop : 0;
}
function pageScrollUp(mousePosY,ev){
window.scrollBy(0,-80);
var d = document.getElementById('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:blue solid
1px;background-color:lightyellow;width:100px;"

onMouseMove='getPosition();'>Drag 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>
 
Ad

Advertisements

Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top