用Table簡單實作Grid中的拖動效果

 網上有很多網友提供此功能，但是大部分都是封裝到類裡的，一些剛入門或對JS不甚了解的朋友就隻能引用别人的東西，想改一下又怕出錯，現在提供一個超簡單的示例：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

< HTML >

< HEAD >

< TITLE >  New Document  </ TITLE >

< META  NAME ="Generator"  CONTENT ="EditPlus" >

< META  NAME ="Author"  CONTENT ="" >

< META  NAME ="Keywords"  CONTENT ="" >

< META  NAME ="Description"  CONTENT ="" >

< style > ...

table

{...}{

    background-color:#808080;

    font-size:12px; line-height:20px;

    table-layout:fixed;

}

td

{...}{

    background-color:#fff;

}

.tit

{...}{

    border-left:1px solid #fff;

    border-top:1px solid #fff;

    background-color:#d6d3ce;

    text-align:center;

    clear:both;

}

.mover

{...}{

    float:right;

    overflow:hidden;

    width:5px; height:100%;

    cursor:col-resize;

}

.lable

{...}{

    float:left;

    margin-left:2px;

}

</ style >

< script  language ="javascript" > ...

    function gridMousedown(obj,e) ...{

        var defaultWidth = obj.offsetWidth;

        var defaultLeft = e.clientX;

        var handleObj = obj;

        if (!obj.initWidth) obj.initWidth = obj.offsetWidth;

        document.onmousemove = function ()

        ...{

            var initWidth = handleObj.initWidth;

            var newWidth = defaultWidth + (e.clientX-defaultLeft);

            newWidth = newWidth<initWidth?initWidth:newWidth;

            handleObj.width = newWidth;

        };

        document.onmouseup = function ()

        ...{

            document.onselectstart = document.onmousemove = document.onmouseup = null;

        };

        document.onselectstart = function ()

        ...{

            return false;

        };

    }

</ script >

</ HEAD >

< BODY >

< table  cellspacing ="1"  cellpadding ="0"  border ="0" >

     < tr >

         < td  width ="50"  class ="tit" >                 

             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 

             < div  class ="lable" > 标題1 </ div >             

         </ td >

         < td  width ="50"  class ="tit" >                 

             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 

             < div  class ="lable" > 标題2 </ div >             

         </ td >

         < td  width ="90"  class ="tit" >                 

             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 

             < div  class ="lable" > 标題3 </ div >             

         </ td >

         < td  width ="50"  class ="tit" >                 

             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 

             < div  class ="lable" > 标題4 </ div >             

         </ td >

         < td  width ="50"  class ="tit" >                 

             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 

             < div  class ="lable" > 标題5 </ div >             

         </ td >

         < td  width ="80"  class ="tit" >                 

             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 

             < div  class ="lable" > 标題6 </ div >             

         </ td >

         < td  width ="50"  class ="tit" >                 

             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 

             < div  class ="lable" > 标題7 </ div >

         </ td >

     </ tr >

     < tr >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td ></ tr >

     < tr >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td ></ tr >

     < tr >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td ></ tr >

     < tr >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td ></ tr >

</ table >

</ BODY >

</ HTML >