让table的td可以左右拖动起来

global.css文件内容如下：

//通用表格，在table中加

table.table_style{
background-color: #cccccc;
border: 1px; 
}
.table_style tr, .dbColorTr tr {
background-color: #ffffff;
}

//过长内容处理
table.dbColorTr{
table-layout:fixed;
}

.dbColorTr td{
text-indent:2px;
margin-left:20px;
//－－过长内容处理－－
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap; 
}

//一排,隔行变色表格头，tr中用
.trHeader {
background-image: url(../images/trHeadBg.jpg) !important;
background-repeat: repeat-x;
background-color: #5E92BA !important;
color: #ffffff;
text-align: center; 
}

 

 

dragger.css文件内容如下：

.fixedHeaderTr{  
position:relative;   
top:expression_r(this.offsetParent.scrollTop);      
}
.mainDiv{   
overflow:auto;   
scrollbar-face-color:9999ff;
height:expression_r((document.body.clientHeight-this.offsetTop>this.children[0].offsetHeight)?(this.children.offsetHeight+20)   :  (document.body.clientHeight-this.offsetTop));   
width:expression_r(document.body.clientWidth);   
}

.resizeDiv
{
width:2px;
overflow:hidden;
float:right;
cursor:e-resize;
}

.sortarrow
{
color:#ffc;
font-weight:normal
}

 

dragTab.js文件内容如下：

//鼠标拖动事件

//mouse down
function MouseDownToResize(obj,tableId) {
obj.mouseDownX = event.clientX;
obj.pareneTdW = obj.parentElement.offsetWidth;

//“taskListTable_id” 为Table 的ID
obj.pareneTableW = document.getElementByIdx_x(tableId).offsetWidth;
obj.setCapture();
}

//mouse move
function MouseMoveToResize(obj,tableId) {
if (!obj.mouseDownX) {
return false;
}
var newWidth = obj.pareneTdW * 1 + event.clientX * 1 - obj.mouseDownX;     

//限制列表宽度不能小于120px
if (newWidth > 40) {
obj.parentElement.style.width = newWidth;
document.getElementByIdx_x(tableId).style.width = obj.pareneTableW * 1 + event.clientX * 1 - obj.mouseDownX;
}
}



//mouse up    
function MouseUpToResize(obj,tableId) {
//捕获鼠标释放信息
obj.releaseCapture();
obj.mouseDownX = 0;

//增加iframe 高度，防止iframe数据显示不完整
var height = document.body.scrollHeight;
height += 30; 
if ( window.frameElement) {
window.frameElement.style.height = height + "px";
}
}

 

html页面代码如下：

<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/tab/drag.css" rel="stylesheet" type="text/css" />

<script type=\'text/javascript\' src="js/drag/dragTab.js"></script>

 

<div class=\'mainDiv\'>

   <table id="portlist_id" width="100%" border="0" cellpadding="0" cellspacing="1" style="table-layout:fixed" class="table_style dbColorTr">

       <tr class="fixedHeaderTr trHeader">

          <th width="33" pop=\'false\'>
<div class="resizeDiv" onMouseDown="MouseDownToResize(this,\'portlist_id\');"
onMouseMove="MouseMoveToResize(this,\'portlist_id\');"
onMouseUp="MouseUpToResize(this,\'portlist_id\');"></div> 
状态
</th>

          <th width="90">
<div class="resizeDiv" onMouseDown="MouseDownToResize(this,\'portlist_id\');"
onMouseMove="MouseMoveToResize(this,\'portlist_id\');"
onMouseUp="MouseUpToResize(this,\'portlist_id\');"></div> 
区域
</th>

       </tr>

   </table>

</div>