如何实现拖动方式动态改变左右两边div的宽度

<table contentEditable><tr>
<td><div styel="width:100%;"></div></td>
<td><div styel="width:100%;"></div></td>
<td><div styel="width:100%;"></div></td>
</tr></table>

解决方案 »

  1.   

    <style>
    #left,#right{
    width:300px;
    float:left;
    border:1px solid #000;
    height:400px;
    }
    #bar{
    float:left;
    width:10px;
    height:400px;
    background:#000;
    }
    </style>
    <body>
    <div id="left">left DIV</div>
    <div id="bar"></div>
    <div id="right">right DIV</div>
    </body>
    <script language="javascript">
    var l = document.getElementById("left");
    var r = document.getElementById("right");
    var bar = document.getElementById("bar");
    var move=false;
    var offsetL,offsetR,LlastWidth,RlastWidth;
    var leftL = getLeft( l );
    var rightL = getLeft( r ) + r.offsetWidth;bar.onmouseover=function(){
    this.style.cursor = "col-resize";
    }
    bar.onmouseout=function(){
    this.style.cursor = "default";
    }
    bar.onmousedown=function(){
    this.setCapture();
    move=true;
    offsetL = event.offsetX;
    offsetR = this.offsetWidth - offsetL;
    //alert( "event.x="+event.offsetX );}
    bar.onmousemove=function(){
    if( !move ) return;
    left.style.width  = event.x - leftL - offsetL + "px";
    right.style.width = rightL - event.x - offsetR + "px";
    }
    bar.onmouseup = function(){
    this.releaseCapture();
    move = false;
    }
    function getLeft(e)
    {
    var l = e.offsetLeft;
    while(e=e.offsetParent)l+=e.offsetLeft;
    return l;
    }
    </script>