如何使用Table实现Grid中的拖动效果？
如何使用Table实现Grid中的拖动效果？
网上有很多网友提供此功能，但是大部分都是封装到类里的，一些刚入门或对JS不甚了解的朋友就只能引用别人的东西，想改一下又怕出错，现在提供一个超简单的示例：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"CONTENT=""><METANAME="Keywords"CONTENT=""><METANAME="Description"CONTENT="">
<style>
table
{background-color:#808080;font-size:12px;line-height:20px;table-layout:fixed;
}td{background-color:#fff;}.tit{border-left:1pxsolid#fff;border-top:1pxsolid#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><scriptlanguage="javascript">functiongridMousedown(obj,e){vardefaultWidth=obj.offsetWidth;vardefaultLeft=e.clientX;varhandleObj=obj;if(!obj.initWidth)obj.initWidth=obj.offsetWidth;document.onmousemove=function(){varinitWidth=handleObj.initWidth;varnewWidth=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(){returnfalse;};}</script></HEAD><BODY><tablecellspacing="1"cellpadding="0"border="0"><tr><tdwidth="50"class="tit"><divclass="mover"onmousedown="gridMousedown(this.parentNode,event)"></div><divclass="lable">标题1</div></td><tdwidth="50"class="tit"><divclass="mover"onmousedown="gridMousedown(this.parentNode,event)"></div><divclass="lable">标题2</div></td><tdwidth="90"class="tit"><divclass="mover"onmousedown="gridMousedown(this.parentNode,event)"></div><divclass="lable">标题3</div></td><tdwidth="50"class="tit"><divclass="mover"onmousedown="gridMousedown(this.parentNode,event)"></div><divclass="lable">标题4</div></td><tdwidth="50"class="tit"><divclass="mover"onmousedown="gridMousedown(this.parentNode,event)"></div><divclass="lable">标题5</div></td><tdwidth="80"class="tit"><divclass="mover"onmousedown="gridMousedown(this.parentNode,event)"></div><divclass="lable">标题6</div></td><tdwidth="50"class="tit"><divclass="mover"onmousedown="gridMousedown(this.parentNode,event)"></div><divclass="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>