I have the following code which allows you to drag a div in IE, and have it
then move back to it's natural position when you release the mouse button:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><script type="text/javascript">var draggable=0;</script></head>
<body>
<div id="div1"
style="width:300px;height:300px;background-color:orange;"></div>
<div id="div2" style="width:300px;height:300px;background-color:green;"
onmousedown="draggable=1;this.style.position='abso lute';this.style.left=event.x-25+'px';this.style.top=event.y-25+'px';"
onmousemove="if(draggable==1){this.style.left=even t.x-25+'px';this.style.top=event.y-25+'px';}"
onmouseup="draggable=0;this.style.position='static ';"></div>
</body>
</html>
I have written what I would expect to do the same thing in other browsers (I
replaced event.x/event.y with event.layerX/event.layerY). Here is that code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><script type="text/javascript">var draggable=0;</script></head>
<body>
<div id="div1"
style="width:300px;height:300px;background-color:orange;"></div>
<div id="div2" style="width:300px;height:300px;background-color:green;"
onmousedown="draggable=1;this.style.position='abso lute';this.style.left=event.layerX-25+'px';this.style.top=event.layerY-25+'px';"
onmousemove="if(draggable==1){this.style.left=even t.layerX-25+'px';this.style.top=event.layerY-25+'px';}"
onmouseup="draggable=0;this.style.position='static ';"></div>
</body>
</html>
However, when I attempt to drag the div in FireFox it just sort of "jumps
around", it definitely isn't doing what the IE version did in IE. did I do
something wrong? Was there something that should have been in both of the
versions that I forgot? Any help would be appreciated. Thanks.
--
Nathan Sokalski
nj********@hotmail.com
http://www.nathansokalski.com/
