【在线等】讨论一个简单的拖动层问题==================

这是个简单的拖动层代码。我想问的是：能不能不要在鼠标移动事件中改变层的位置，在鼠标按下时弄个定时器（setTimeout），每隔一秒获取鼠标位置
去改变层的位置，鼠标释放时释放定时器。因为在鼠标移动事件中改变层经常会出现 咔 的现象。我试了一下用定时器获取不到鼠标位置，郁闷！求 高手 怎么解决啊？？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var divobj;
var isDown=false;
var isFirst=true;
var divx=0;
var divy=0; function createDiv()
{
divobj=document.createElement("div");
divobj.innerHTML="dddddddab";
divobj.style.position="absolute";
divobj.style.left="0px";
divobj.style.top="0px";
divobj.style.width="100px";
divobj.style.height="80px";
divobj.style.backgroundColor="red"; document.body.appendChild(divobj); divobj.onmousedown=function()
{
document.body.onselectstart=function(){return false;};
isDown=true;
}; document.body.onmouseup=function()
{
document.body.onselectstart=function(){return true;};
isDown=false;
isFirst=true;
}; document.body.onmousemove=mouseMove;
} function mouseMove(e)
{
if(isDown)
{
if(e==null)
e=window.event;

var x=e.clientX;
var y=e.clientY; if(isFirst)
{
isFirst=false;

divx=x-(divobj.style.left.replace("px","")-0);
divy=y-(divobj.style.top.replace("px","")-0);
} divobj.style.left=x-divx+"px";
divobj.style.top=y-divy+"px";
}
}
</script>
</head>
<body onload="createDiv()" >
<br><br>
dllllllllllllllldllllllllllllllldllllllllllllllldlllllllllllllll<br>
dllllllllllllllldllllllllllllllldllllllllllllllldlllllllllllllll<br>
dllllllllllllllldllllllllllllllldllllllllllllllldlllllllllllllll<br>
dllllllllllllllldllllllllllllllldllllllllllllllldlllllllllllllll<br>
</body>
</html>

解决方案 »

  1.   

     document.onmouseup=function()
                    {
                        document.body.onselectstart=function(){return true;};
                        isDown=false;
                        isFirst=true;
                    };                document.onmousemove=mouseMove;这样看看
      

  2.   


    恩 ，好想比 document.body.  顺畅些了，那能不能用定时器实现呢？
      

  3.   

    <html>
        <head>
            <script type="text/javascript"> 
     
            function mousePosition(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 
                }; 
            } 
            document.onmousemove = mouseMove;        function mouseMove(ev){
                ev = ev || window.event;
                var mousePos = mousePosition(ev);
                if(showPos){
                showPos=false;
                document.getElementById('txtX').value=mousePos.x;
                document.getElementById('txtY').value=mousePos.y;
                setTimeout(function(){showPos=true;}, 1000);
                }
            } 
            var showPos=true;
            
            </script> 
        </head>
        <body>
            X:<input id="txtX" type="text" />
            Y:<input id="txtY" type="text" />
        </body>
    </html>谢谢给分。
      

  4.   

    设2个全局变量x, y, 在mousemove的时候把坐标保存下来，然后在定时器里把div的坐标设置为x, y
      

  5.   

    设2个全局变量x, y, 在mousemove的时候把坐标保存下来，然后在定时器里把div的坐标设置为x, y