html table拖拽列高度不变,浏览器兼容的实现table中通过拖拽改变列宽的最佳实践...

在企业级应用中，表格是非常常见的展现方式，这时当列数据较长时，一种比较自然，体验也较好的处理方式就是通过拖拽改变列宽，这个功能在一些重量级JS组件库中都有提供，实现原理各有不同，但是一个共同点就是实现比较复杂，那我们通过很少的代码，常规的table结构，能实现这个功能么？本文将提供一个经过实际验证的实践，供开发者参考，扩展思路。

总体思路：

1.HTML结构：

为了简化代码，采用标准的HTML结构，即table-tr-td模式，无其他限制，在我们的实际应用中，表格非常复杂，但是核心技术没有变；

2.事件：

采用onmousedown、onmousemove、onmouseup三个事件相结合的方式，处理鼠标拖动元素过程中的事件；

3.浏览器兼容：

整个实现中，涉及到事件模型，offsetX偏移量计算等存在浏览器差异的情况，本文都提供了精炼的处理，并经过了测试；

4.列宽度计算：

拖动改变列宽的核心算法是，鼠标移动过程中计算鼠标在屏幕上滑动过的水平距离，可能是正值可能为负，然后加上单元格原来的宽度，计算得出新的宽度；

5.边界才可拖动并改变光标样式：

这个是通过元素的offsetWidth和offsetX数据计算得出，只有在光标位于边框线两侧4px范围内的区域，才可以拖动，并且改变光标样式；

下面附上代码，供开发者参考：

html PUBLIC "-//W4C//DTD XHTML 1.0 Transitional//EN" "http://www.w4.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

标题一	标题二	标题三	标题四
内容A	内容B	内容C	内容D
内容A	内容B	内容C	内容D
内容A	内容B	内容C	内容D
内容A	内容B	内容C	内容D
内容A	内容B	内容C	内容D
内容A	内容B	内容C	内容D
内容A	内容B	内容C	内容D

可以看到，HTML非常简单。

var headerTds = document.getElementById("tbl").rows[0].cells;

var mousedown = false;

var resizeable = false;

var targetTd;

var screenXStart =0;

var tdWidth = 0;

var headerWidth = 0;

var tblObj = document.getElementById("tbl");

for(var i = 0;i

addListener(headerTds[i],"mousedown",onmousedown);

addListener(headerTds[i],"mousemove",onmousemove);

}

function onmousedown(event){

if (resizeable == true){

var evt =event||window.event;

mousedown = true;

screenXStart = evt.screenX;

tdWidth = targetTd.offsetWidth;

headerWidth = tblObj.offsetWidth;

}

}

function onmousemove(event){

var evt =event||window.event;

var srcObj = getTarget(evt);

var offsetX = evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);//这个比较关键，解决了Firefox无offsetX属性的问题

if (mousedown == true){

var width = (tdWidth + (evt.screenX - screenXStart)) + "px";//计算后的新的宽度

targetTd.style.width = width;

tblObj.style.width = (headerWidth + (evt.screenX - screenXStart)) + "px";

}else{

var trObj = tblObj.rows[0];

if(srcObj.offsetWidth - offsetX <=4){//实际改变本单元格列宽

targetTd=srcObj;

resizeable = true;

srcObj.style.cursor='col-resize';//修改光标样式

}else if(offsetX <=4 && srcObj.cellIndex > 0){//实际改变前一单元格列宽，但是表格左边框线不可拖动

targetTd=trObj.cells[srcObj.cellIndex - 1];

resizeable = true;

srcObj.style.cursor='col-resize';

}else{

resizeable = false;

srcObj.style.cursor='default';

}

}

}

document.onmouseup = function(event){

tartgetTd = null;

resizeable = false;

mousedown = false;

document.body.style.cursor='default';

}

function getTarget(evt){

return evt.target || evt.srcElement;

}

function addListener(element,type,listener,useCapture){

element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);

}

上述代码非常精炼的实现了拖拽改变列宽的功能，经过测试，兼容IE8以上、Firefox、Chrome等主流浏览器。