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>
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>
Really, to make a