浏览器兼容的实现table中通过拖拽改变列宽的最佳实践
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在企业级应用中，表格是非常常见的展现方式，这时当列数据较长时，一种比较自然，体验也较好的处理方式就是通过拖拽改变列宽，这个功能在一些重量级JS组件库中都有提供，实现原理各有不同，但是一个共同点就是实现比较复杂，那我们通过很少的代码，常规的table结构，能实现这个功能么？本文将提供一个经过实际验证的实践，供开发者参考，扩展思路。 总体思路： 1.HTML结构： 为了简化代码，采用标准的HTML结构，即table-tr-td模式，无其他限制，在我们的实际应用中，表格非常复杂，但是核心技术没有变； 2.事件： 采用onmousedown、onmousemove、onmouseup三个事件相结合的方式，处理鼠标拖动元素过程中的事件； 3.浏览器兼容： 整个实现中，涉及到事件模型，offsetX偏移量计算等存在浏览器差异的情况，本文都提供了精炼的处理，并经过了测试； 4.列宽度计算： 拖动改变列宽的核心算法是，鼠标移动过程中计算鼠标在屏幕上滑动过的水平距离，可能是正值可能为负，然后加上单元格原来的宽度，计算得出新的宽度； 5.边界才可拖动并改变光标样式： 这个是通过元素的offsetWidth和offsetX数据计算得出，只有在光标位于边框线两侧4px范围内的区域，才可以拖动，并且改变光标样式； 下面附上代码