版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
n年前我写过一个自定义表格设计器，能拖动列宽，总结一下：
准备工作：
- 定义一个对象，存放拖动相关信息，如拖动开始的坐标等。
- 定义一个对象，包装坐标信息，好像也可以不包装吧。
- 准备拖动条，放到table head中
- 准备一个标记红线，放入document当中，拖动的过程，用红线标记
准备代码如下：
//拖动手柄，放到table header中
var dragBarStr=" <span class='resizeDivClass'> </span>"; //改变尺寸的把手
.resizeDivClass{
text-align:right;
width:1px;
height:18
margin:0px 0 0px 0;
background:#fff;
border:0px;
float:right;
cursor:e-resize;
background-image:url(./images/righttable_bg.jpg); repeat-y;
}
//准备一个标记红线，放入document当中，拖动的过程，用红线标记
<div id="dragLineY" class="draggable" style="display:none;cursor:e-resize;background:red;width:1px;height:100px;position:absolute; z-index:10s">
//存放拖动相关信息的对象：
var _design={ //设计器对象
tab:null,
cancelFoucs:false, //由于插入行 插入列 删除行 删除列 增加行 增加列后失去焦点
mouseOffset:null, //坐标
dragObject:null, //当前拖动对象+
dragHorizontalLine:null,
dragObjectX:0, //拖动对象开始x
dragObjectY:0, //拖动对象开始y
currentTdHead:null, //当前单元格头
colHeads:null, //列头对象
rowHeadOpObj:null //行头操作对象
};
/** 根据事件对象包装成鼠标坐标对象* */
function mousePosition(event){
var x=parseInt(event.clientX)
var y=parseInt(event.clientY)
return new MousePoint(x,y)
}
/** 鼠标位置* */
function MousePoint(x,y){
this.x=x;
this.y=y;
}
拖动事件：
按下鼠标左键
拖动鼠标
释放鼠标左键
如果在拖动条上按下鼠标键，（onmiusedown）,
记录原始信息：
a)关联的TH,(table）
b)x坐标(横坐标)
c)定位“标识红线“的位置与长度,且显示红线
也许还应该记录TH的序号？这个才是基础信息？如果有这个，TH不用特别记录。
释放鼠标的时候：
1、计算拖动的距离
2、修正表格宽度
3、修正相关th宽度
4、修正colgroup col 的值
未完 待补充