JS实现拖动鼠标改变网格的宽度

我现在要实现的一个功能就是：
   我一个页面，将其分成三个部分，中间就有两条分隔线，现在的功能就是用鼠标拖动分隔线就能改变其大小而且拖动其中窗口变大时，其它两个就随之变小，但变小到一定的宽度时，就不能再缩小了
  
    在网上找了一些例子  都有些问题  不能满足要求  又不会写 大侠们帮帮忙   期待ing  

解决方案 »

  1.   

    这样？
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <meta http-equiv=Content-Type content="text/html;charset=gb2312">
    <TITLE> New Document </TITLE>
    </HEAD><BODY>
    <style>
    .resizeDivClass
    {
    position:relative;
    background-color:gray;
    width:2;
    z-index:1;
    left:expression(this.parentElement.offsetWidth-1);
    cursor:e-resize;}
    </style><script language=javascript>
    //cursor:e-resize;function MouseDownToResize(obj){obj.mouseDownX=event.clientX;
    obj.pareneTdW=obj.parentElement.offsetWidth;
    obj.pareneTableW=theObjTable.offsetWidth;
    obj.setCapture();
    }
    function MouseMoveToResize(obj){
        if(!obj.mouseDownX) return false;
        var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
        if(newWidth>0)
        {
    obj.parentElement.style.width = newWidth;
    theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
    }
    }
    function MouseUpToResize(obj){
    obj.releaseCapture();
    obj.mouseDownX=0;
    }</script><table id=theObjTable STYLE="table-layout:fixed;border:1px" >
    <tr bgcolor=cccccc >
    <td valign=top>
    <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
    姓名</td>
    <td valign=top >
    <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
    单位</td>
    <td valign=top >
    <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
    地址</td>
    </tr><tr>
    <td>徐宏辉</td><td>国联证券</td><td>电子商务部</td>
    </tr>
    </table></BODY>
    </HTML>
      

  2.   


    要是我想Table的宽度固定，当拉动的时候整个大小不会变，只会改变内部的宽，也就是所以，当其中一个单元格拉大的时候，其它的随之会缩小，要实现这样的该怎样去改写了，谢谢！
      

  3.   


    <!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>js SplitPanel</title>
    </head>
    <body >
    <div style="width:960px; height:700px; margin:0px auto;">
    <div id="left"  style="background-color:#1ef; width:200px;height:100%; float:left">Left</div>
    <div id="center" style="background-color:blue; width:760px;height:100%; float:left; overflow:hidden;" >
        <div id="centerLeft" style="background-color:blue; width:500px;height:100%; float:left;">
            <div id='top'  style="background-color:blue; width:100%;height:200px;">center top </div>
            <div id='bottom'  style="background-color:#fff; width:100%;height:500px;">center bottom </div>
         </div>
         <div id="right" style="background-color:yellow; width:250px;height:100%; float:left">right</div>
    </div></div>
    </body>
    <script type="text/javascript">var $=function(id){
        return document.getElementById(id);
    };
    function bindEvent(obj,evt,fun){
        if(window.addEventListener){
            obj.addEventListener(evt,function(e){fun(e);},false);
        }else{
            obj.attachEvent('on'+evt,fun);
        }
    }function SplitPanel(panel1,panel2,t,splitWide, panel1MinSize,panel2MinSize)
    {
        if(panel1 && panel2)
        {
            this.Panel1=panel1;
            this.Panel2=panel2;
            this.T=t?t:'H'; // 类型 H （水平方向） V 垂直方向
            this.SplitWide=splitWide?splitWide:5; // 分隔条粗
            this.Panel1MinSize=panel1MinSize?panel1MinSize:100; // 最小宽度 或者 高度
            this.Panel2MinSize=panel2MinSize?panel2MinSize:100;// 最小宽度 或者 高度
            this.MouseDown=0;
            this.P=0; 
            this.init();
        }
    };SplitPanel.prototype.init=function()
    { 
        var sp = this;
        var size =sp.T=='H'?(sp.Panel1.offsetWidth+sp.Panel2.offsetWidth):(sp.Panel1.offsetHeight+sp.Panel2.offsetHeight);
        var p=0;
        var splitPanel = document.createElement('div');
        splitPanel.style.cssText =  "background-color:#ddd;cursor:crosshair;overflow:hidden;" + (sp.T=='H'?'width:'+sp.SplitWide+'px;height:100%;float:left;':'width:100%;height:'+sp.SplitWide+'px;');
        sp.Panel2.parentNode.insertBefore(splitPanel,sp.Panel2);
        sp.T=='H'?(sp.Panel2.style.width =sp.Panel2.offsetWidth-sp.SplitWide +'px'):(sp.Panel2.style.height =(sp.Panel2.offsetHeight-sp.SplitWide) +'px');
        
        splitPanel.onmouseover=function(){this.style.backgroundColor='red';};
        splitPanel.onmouseout=function(){this.style.backgroundColor='#ddd';};
        splitPanel.onmousedown=function(e){sp.MouseDown=1; e=e||event; sp.P=sp.T=='H'?(e.x||e.pageX):(e.y||e.pageY); };
        bindEvent(document.body,'mousemove',function(e)
        {  
             if(sp.MouseDown)
              { 
                   e=e||event;
                   if(sp.T=='H')
                   {
                      p = e.x||e.pageX;
                      var w2= sp.Panel2.offsetWidth  + (sp.P-p);
                      var w1= size-w2-sp.SplitWide;
                      if(w2<=sp.Panel2MinSize)
                      {
                        sp.Panel2.style.width = sp.Panel2MinSize +"px";
                        sp.Panel1.style.width =  size-sp.Panel2MinSize -sp.SplitWide +"px";
                        return;
                      }
                      if(w1<=sp.Panel1MinSize)
                      {
                        sp.Panel2.style.width = size -sp.Panel1MinSize-sp.SplitWide +"px";
                        sp.Panel1.style.width =sp.Panel1MinSize   +"px";
                        return;
                      }
                       sp.Panel2.style.width =w2 +"px";
                       sp.Panel1.style.width =w1 +"px";
                    
                   }else
                   {
                      p=e.y||e.pageY;
                      var h2= sp.Panel2.offsetHeight  + (sp.P-p);
                      var h1= size-h2-sp.SplitWide;
                      if(h2<=sp.Panel2MinSize)
                      {
                        sp.Panel2.style.height = sp.Panel2MinSize +"px";
                        sp.Panel1.style.height =  size-sp.Panel2MinSize -sp.SplitWide +"px";
                        return;
                      }
                      if(h1<=sp.Panel1MinSize)
                      {
                        sp.Panel2.style.height = size -sp.Panel1MinSize-sp.SplitWide +"px";
                        sp.Panel1.style.height =sp.Panel1MinSize   +"px";
                        return;
                      }
                       sp.Panel2.style.height =h2 +"px";
                       sp.Panel1.style.height =h1 +"px";
                   }
                   sp.P=p;
               }
            });
           bindEvent(document.body,'mouseup',function(e){sp.MouseDown=0;});
    };
    var sp = new SplitPanel($('left'),$('center'),'H',5,100,300);
    var sp1 = new SplitPanel($('centerLeft'),$('right'),'H',5,300,100);
    var sp2 = new SplitPanel($('top'),$('bottom'),'V');
    </script>
    </html>