The Use of ScrollBy


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

V

VK

Hello JavaScript experts,
I have a floating div which I drag all over the page.

Drag'n'drop is the rocket science if scripting :) Really, to make a
really robust drag script ready for all circumstances and for all
UA-specific bugs requires much more than any AJAX or SOAP or anything.
This is why despite of myriads of "draggin-dropping" scripts written
over the last ten years there is a handful of really working in all
given environments. From free publically available I would suggest

<http://developer.yahoo.com/yui/dragdrop/>
samples at
<http://developer.yahoo.com/yui/examples/dragdrop/index.html>

This is if you are seeking a script for project. If you are learning
script over making a drag-n-drop script then someone else may help you
with that.
 

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