PDA

Click to See Complete Forum and Search --> : Help for draging a div.

Lotfi Abdolhal
11-10-2004, 05:14 AM
Trying to understand the logarithm of the draging's operation in its simplest form, I made this program so that it runs with IE6, but it does not.
Of course lots or few of mistakes are there.
Would someone, please help me fix them.


<HTML>
<HEAD>
<STYLE type="text/css">
.namat{position:absolute; top:0px; left:0px; width:4cm; height:4cm; background-color:#ff33ff;}
</STYLE>

<SCRIPT type="text/javascript">
var beover; var beheld;
function Drag(OBJ){
if((beover == true) && (beheld == true)){
difrcex= (window.event.x) - (window.event.offsetx);
difrcey= (window.event.y) - (window.event.offsety);
OBJ.style.left= difrcex;
OBJ.style.top= difrcey;
}
}
function Nodrag(){
beheld= false; beover= false; return false;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="QESM" class="namat" onmouseover="beover= true; Drag(this);"
onkeydown="beheld= true; Drag(this);"
onmousemove="Drag(this)"
onmouseup="Nodrag(this)">
<CENTER>Help draging, please</CENTER>
</DIV>
</BODY>
</HTML>
baconbutty
11-10-2004, 06:11 AM
I am not quite sure what you want the DIV to do, but a quick thought is:-



difrcex= (window.event.x) - (window.event.offsetx);
difrcey= (window.event.y) - (window.event.offsety);



Your problem may lie here. What are these calculations trying to achieve, and how did you work them out?

If you want the div to follow the mouse, then you could just say:-

difrcex=window.event.clientX;
difrcey=window.event.clientY;

Note also that the above will only work in IE, not Mozilla (which handles events differently to window.event).
Lotfi Abdolhal
11-10-2004, 07:04 AM
Hello Baconbutty!

Thanks for paying the attention to help.
Yes, I want the div to follow the mouse, but changing the two original lines:

difrcex= (window.event.x) - (window.event.offsetx);
difrcey= (window.event.y) - (window.event.offsety);

with:

difrcex=window.event.clientX;
difrcey=window.event.clientY;

does not make it work either.

What I want my two original lines to achieve is to get the difference between the x's distance of the pointer from the body, and that of the pointer from the left-side edge of the div which is supposed to equal the x's distance of the div's left-side edge from the body.
I hope this would make it a bit clearer.

And yes I know that my code only works in IE.
baconbutty
11-10-2004, 09:09 AM
Points to note:-

1. window.event.x is unreliable, don't use it.
2. if you use window.event.offsetX for mouse move, this will only capture the position of the mouse "after" it has already moved - so it won't capture the actual movement - you need to store its last position.
3. you have used "onkeydown" in your code, not "onmousedown"
4. you should use "onmouseup" to capture the mouse leaving the div.

Try:



<HTML>
<HEAD>
<STYLE type="text/css">
.namat{position:absolute; top:0px; left:0px; width:4cm; height:4cm; background-color:#ff33ff;}
</STYLE>

<SCRIPT type="text/javascript">
var beover; var beheld;

var lastX=0;
var lastY=0;

function MouseDown(OBJ)
{
lastX=window.event.clientX;
lastY=window.event.clientY;
}

function Drag(OBJ)
{
if(beover == true && beheld == true){

difrcex= window.event.clientX - lastX;
difrcey= window.event.clientY - lastY;
OBJ.style.left=parseInt(OBJ.currentStyle.left)+difrcex;
OBJ.style.top=parseInt(OBJ.currentStyle.top)+difrcey;
lastX=window.event.clientX;
lastY=window.event.clientY;
}
}
function Nodrag(){
beheld= false; beover= false;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="QESM" class="namat" onmouseover="beover= true;"
onmousedown="beheld= true; MouseDown(this);"
onmousemove="Drag(this)"
onmouseup="Nodrag(this)" onmouseout="Nodrag(this)">
<CENTER>Help draging, please</CENTER>
</DIV>
</BODY>
</HTML>
Lotfi Abdolhal
11-10-2004, 11:06 AM
Hello Baconbutty!

I am very gratefull to you for your kind help.
With your code I trust I will get the techniq I am looking for.