DIV移动的问题，求助~！

本帖最后由 h123hu 于 2012-02-21 19:55:23 编辑

解决方案 »

  1.   

    虽然是dragDivLeft-1，但实际上你算出来的dragDivLeft比原来大1，设置节点调试下吧。
      

  2.   


    不是很明白，如果当前的dragDivLeft是100，那么，100-1不是99么？难道是这个获取的当前坐标不准确导致的？
    dragDivLeft=dragDiv.getBoundingClientRect().left;//模块左坐标
      

  3.   

    dragDivLeft-1+'px';是不是呗算成字符串的链接操作了
      

  4.   


    我断点看了一下，
    dragDivLeft=dragDiv.getBoundingClientRect().left;//模块左坐标这个每次获得的坐标数值都增加了8个左右的像素
    所以，我即使减1，也无补于事我不明白的是，如果当前的坐标是100的话，他为什么获得的至少是108呢？
      

  5.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #div1{
    width:948px; height:40px; overflow:hidden; position:relative; border:1px #efefef solid;
    }
    #div2{
    width:40px; height:40px; overflow:hidden; position:absolute; background-color:#bf0000; top:0px; left:0px;
    }
    </style>
    <script type="text/javascript">
    function getById(obj)
    {
    return document.getElementById(obj);
    }//获取鼠标坐标
    function getMouseXY(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 
    };

    }window.onload=function()
    {
    var div1=getById('div1');//获取父级ID
    var dragDiv=getById('div2');//获取子级ID
    var dragDivLeft=0;//模块左坐标
    var mouseLeft=0;//鼠标的左坐标
    var moveDis=0;//模块的移动距离

    dragDiv.style.left=dragDiv.offsetLeft+'px';//给移动模块添加行内样式

    var time=[];//向右计时器
    var output = function (id, text) {
                            document.getElementById(id).innerHTML += text + '<br/>';
                        };//数值返回查看器

    div1.onmousedown=function(ev)
    {
    var oEvent=ev||event;
    mouseLeft=getMouseXY(oEvent).x;//获取鼠标左坐标
    moveDis=mouseLeft-dragDiv.offsetLeft;//模块移动的距离=鼠标的左坐标-模块当前的左坐标

    var i=0;
    var leftMove=false;
     time.push(setInterval(function () {

    dragDivLeft=dragDiv.offsetLeft;//模块左坐标
    var newmoveDis=mouseLeft-dragDivLeft;//模块移动的距离=鼠标的左坐标-模块当前的左坐标

    //向右
    if(moveDis>=0)
    {
    //只有当鼠标的左坐标-模块的左坐标>0时，并且模块左坐标+自己的宽度<父级模块的宽度时，模块才能向右移动
    if(newmoveDis>=0 && dragDivLeft+dragDiv.offsetWidth<=div1.offsetWidth){

    dragDiv.style.left=dragDivLeft+1+'px';
    output('p1','右移(模块坐标：'+dragDivLeft + ',鼠标坐标：'+mouseLeft+',移动距离：' + newmoveDis+')');

    }
    else
    {
    clearInterval(time.shift());
    output('p1','停止(模块坐标：'+dragDivLeft + ',鼠标坐标：'+mouseLeft+',移动距离：' + newmoveDis+')');

    }
    }
    //向左
    else if(moveDis<=0)
    {
    //只有当移动距离<=0，并且模块的左坐标>=0时，模块才能移动
    if(newmoveDis<=0 && dragDivLeft>=0)
    {
    //这个地方不能相减
    dragDiv.style.left=dragDivLeft-1+'px';
    output('p1','左移(模块坐标：'+dragDivLeft + ',鼠标坐标：'+mouseLeft+',移动距离：' + newmoveDis+')');

    }
    else
    {
    clearInterval(time.shift());
    output('p1','停止(模块坐标：'+dragDivLeft + ',鼠标坐标：'+mouseLeft+',移动距离：' + newmoveDis+')');

    }

    }

    },1));

    };

    }
    </script>
    </head><body>
    <div id="div1"> <div id="div2"></div></div>
    <p id="p1"></p>
    </body>
    </html>dragDivLeft=dragDiv.getBoundingClientRect().left;
    我把上面的修改为：
    dragDivLeft=dragDiv.offsetLeft;IE和谷歌下移动是正常的了可是，火狐却有问题:
    IE和谷歌下移动模块的初始位置是0
    而且，火狐下是-2，因此，+1不起作用，我明明定义是left:0px;dragDiv.style.left=dragDiv.offsetLeft+'px';//给移动模块添加行内样式
    为什么到了火狐下变成left:-2px;了
      

  6.   

    LS的这个问题好像是IE/ff起始坐标点不同造成的吧！
    IE好象是(2,2).其他是（0，0）开始！
    《JS高级程序设计》里面说过。11章！