JS实现可改变大小的左右分栏

左右分栏，左右都是div，左边id为a，里面是个树型菜单，右边id为b，内容为iframe。中间也是个div，即下面的obj对象，JS代码如下
<script type="text/javascript">
var x,obj,down=false;
function init(){
obj=event.srcElement;
obj.setCapture();
down=true;
x=event.offsetX;
}
function move(){
var obj1,obj2;
obj1=document.getElementById("a");
obj2=document.getElementById("b");
if(down&&event.srcElement==obj){
obj.style.posLeft=document.body.scrollLeft+event.x-x;
if(obj.style.posLeft<=999){
obj1.style.pixelWidth=obj.style.posLeft;
obj2.style.pixelWidth=document.body.scrollWidth-obj1.style.pixelWidth-obj.style.pixelWidth;
}if(obj.style.posLeft>999){
obj1.style.pixelWidth=999;
obj2.style.pixelWidth=0;
}
}
}
function stopdrag(){
down=false;
obj.releaseCapture();
}
</script>
为什么只能往右拖动，而不能往左拖动？有什么办法能使鼠标往左拖动

解决方案 »

  1.   

    我想我发现是什么问题了，在obj.style.posLeft后面减去obj.style.width/2就OK了，但是这样还是有个很大的缺陷，就是往左拖不能快，稍微快点就会脱离，不知道怎么解决，哪位大虾给个提示！！！
      

  2.   

    看这个你满意不？
    http://blog.csdn.net/sunxing007/archive/2009/08/28/4492453.aspx
      

  3.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <style>
       .shadowDivA {
      width: 200px;
      height: 100%;
      position: absolute;
      top: 0px ; left : 0px;
      background-color: #00F;
      filter: alpha(opacity = 70);
      opacity: 0.7;
    }
    .shadowDivB {
      width: 500px;
      height: 100%;
      position: absolute;
      top: 0px ; left : 220px;
      background-color: #0F0;
      filter: alpha(opacity = 70);
      opacity: 0.7;
    }
    .shadowDivM {
      width: 20px;
      height: 100%;
      position: absolute;
      top: 0px ; left : 200px;
      background-color: #F00 ;
      filter: alpha(opacity = 70);
      opacity: 0.7;
    }
       </style>
      </head>
       <script type="text/javascript"> 
       var aWidth = 200 ;
       var bWidth = 500 ;
       var mLeft = 200 ;
       var bLeft = 220 ;
       var oldX ; 
       var flag = false ;
    function down(obj){
    oldX = event.clientX ;
    flag = true ;
    }
    function up(){
    flag = false ;
    }

    function move(obj){
    if(flag){
    var obj1 = document.getElementById("a") ; 
      var obj2 = document.getElementById("b") ;
    var newX = event.clientX ;
    var x = newX - oldX ;
    oldX = newX ;
    aWidth += x ;
    bWidth -= x ;
    //mWidth += x ;
    mLeft += x ;
    bLeft += x ;
    obj2.innerHTML = "x="+x+" aw="+aWidth+" bw="+bWidth+" ml="+mLeft+" bl="+bLeft ;
    obj1.style.width = aWidth + "px" ;
    obj.style.left = mLeft + "px" ;
    obj2.style.width = bWidth + "px" ;
    obj2.style.left = bLeft + "px" ; 
    }
    }
    </script> 
      <body>
       <div id="a" class="shadowDivA"></div>
       <div class="shadowDivM" onmousedown="down(this);" onmouseout="up();" onmouseup="up();" onmousemove="move(this);"></div>
       <div id="b" class="shadowDivB"></div>
    </body>
    </html>