公司PM又搞事了，非要做什么拖拽表格，拖拽表头调整地位不行，还要能调整宽度...
市面上现成的轮子，要么是拖拽地位，要么是拖拽宽度，简略找了找，还是本人造轮子吧，本人造的想怎么捏怎么捏。
需要刚刚开始的时候，依据开源大佬提醒，写了这样的拖拽款式，开开心心的交给PM看，后果被仁慈的驳回，“我要拿得起放得下的表头”：PM如是说。
好吧，好吧，我写，我写。
当初需要写好了，我来整顿一下思路吧，看着很难，写起来很难真正做完又不感觉难的一个需要，还是被坑了好些下的。
首先要明确需要，表格模式，要能拿起以后点击的表头，而后拖动，当他通过左右两侧任意一个表头一半宽度的时候，在该表头，左&右减少一个2像素的边，松开鼠标，将拿起的表头放到竖线处，这是表头的拖动。
其次，表头的宽度能够任意拖动
重点来了，两端须要有固定的列
好了，需要明确了，那么咱们当初开始整顿思路造作吧，
饿了么的表格有现成的拖动宽，固定列，那么就用饿了么的表格组件吧，
emmm，组长说，用div本人布局吧，开展元素内容过多，用饿了么的组件会有限度。
行行行，我都本人写！
先确定表头的数据格式，此处还是要借鉴饿了么，白嫖一时爽，始终白嫖一爽快～
tableHeader [ { label: '表头名称', prop: 'name', // 当前列数据对应字段，很重要 width: '' // 以后宽度 }]通过创立一个数组来存储表头（行），通过调整数组程序来调整列表排序，通过数组内对象属性width来存储当前列宽
<div class="d-table" ref="dTable"> <el-scrollbar ref="el_scroll_dom" class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="default-scrollbar__view"> <div class="d-table_header thead flex" :style="[{width:allwidth}]"> <div v-for="(col,index) in tableHeader" :key="col.label" :class="['d-table_th', 'column_' + index]" :style="{ width: parseInt(col.width)+'px'}" @mousedown="handleMouseDown($event, index)" @mousemove="handleMouseMove($event, index)" > {{col.label}} </div> <div class="draggingDom" ref="draggingDom" v-show="draggingDomVisible">{{draggingText}}</div> <div class="resize-proxy" ref="resizeProxy" v-show="resizeProxyVisible"></div> </div> </el-scrollbar></div> 这样，一个表头咱们就渲染进去了，至于办法咱们上面说。
className column_ 用来辨别每一个表头，毕竟操作表头的宽度肯定会操作dom，mousedown 办法为以后鼠标点下事件，即用户操作宽度或调整地位的触发点，mousemove 用来记录鼠标挪动，这里的mousemove次要用来拖动表头宽度时，鼠标款式的成果。
接下来是拖动表头宽度
之所以先写这个，起因是整个拖拽的思路都是白嫖了饿了么表格宽度调整
首先咱们须要整顿一下，对于拖动都须要哪些元素，这里利用了getBoundingClientRect函数
const tableEl = this.$refs.dTable // 获取外层父级实例 const tableLeft = tableEl.getBoundingClientRect().left // 父级间隔屏幕右边间隔 const columnEl = this.$el.querySelector('.column_'+i) // 获取以后点击元素dom const columnRect = columnEl.getBoundingClientRect() const minLeft = columnRect.left - tableLeft + 30 // 为什么加30？ this.dragState = { startMouseLeft: event.clientX, // 鼠标以后x坐标，设置为起始 startLeft: columnRect.right - tableLeft, // 间隔右边初始值 startColumnLeft: columnRect.left - tableLeft, // 表头右边间隔 tableLeft }而后咱们设置鼠标通过时款式变动，在鼠标通过的元素左边间隔8像素的地位，将鼠标指针更改为col-resize，并且将以后点拖拽锁设定为拖拽宽度。
// 鼠标挪动事件，减少鼠标款式handleMouseMove(event, i) { let target = event.target; if (!this.dragging) { let rect = target.getBoundingClientRect(); const bodyStyle = document.body.style; if (rect.width > 12 && rect.right - event.pageX < 8) { bodyStyle.cursor = 'col-resize'; target.style.cursor = 'col-resize'; this.draggingColumn = true } else if (!this.dragging) { bodyStyle.cursor = ''; target.style.cursor = 'move'; this.draggingColumn = null; } } },接下来开始写鼠标拖拽表头宽度，咱们先将必要元素筹备好
this.dragging = true; // 开启拖动this.resizeProxyVisible = true; // 显示拖拽线实例const resizeProxy = this.$refs.resizeProxy; // 获取实例resizeProxy.style.left = this.dragState.startLeft + 'px'; 批改右边距document.onselectstart = function() { return false; }; // 禁止选中文字document.ondragstart = function() { return false; }; // 禁止拖拽// 增加监听事件，以监听鼠标挪动，抬起事件document.addEventListener('mousemove', handleMouseMove);document.addEventListener('mouseup', handleMouseUp);而后咱们设置鼠标挪动成果
const handleMouseMove = (event) => { const deltaLeft = event.clientX - this.dragState.startMouseLeft; // 获取鼠标理论滚动间隔 const proxyLeft = this.dragState.startLeft + deltaLeft; // 以后所处地位 resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px'; // 设置竖线地位};当初咱们再设置鼠标抬起事件
const handleMouseUp = () => { if (this.dragging) { const { startColumnLeft, startLeft } = this.dragState; const finalLeft = parseInt(resizeProxy.style.left, 10); let columnWidth = finalLeft - startColumnLeft; if(columnWidth < 68) columnWidth = 68 // 最小拖动宽度，能够按需要本人定义 this.tableHeader[i].width = columnWidth const params = JSON.stringify(this.tableHeader) // 这里执行申请事件，将表头以json格局发送给后端，保留以后设置的宽度，实现后设置以后元素宽 columnEl.style.width = columnWidth + 'px' document.body.style.cursor = ''; this.dragging = false; this.draggingColumn = null; this.dragState = {}; this.resizeProxyVisible = false; } // 移除监听事件 document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); document.onselectstart = null; document.ondragstart = null; };这样，拖动宽度的办法就实现了，次要参照的饿了么表格宽度调整。
拖拽表头
上面咱们开始写拖拽表头元素，思路与拖拽宽度一样，咱们创立一个dom（draggingDom）来作为拿起的元素，而后当咱们移动超过左右元素的一半宽度时，咱们将前（后）元素设置边框。起初写到这里时，陷入思维误区，卡了很久，感激好基友陟上晴明提供的中线思路，不然我还在傻傻的动静计算元素宽度。
咱们将整个表头元素模仿成坐标轴，以以后鼠标点击的节点为(0 ,0)，向右边为负（dragging_left），向右为正（dragging_right）
同样，咱们先将须要的元素筹备好，先计算每个表头构造的中线地位，工夫紧迫，这里写了两个办法来计算，前面有工夫复盘再来批改吧。(如果哪个大佬看完有更好的办法请分割我，请你喝咖啡哦，本人太懒了...)
// 右边中线数组getPreLine(i) { let arr = [] let _this = this const setPreWith = (n)=> { if(!n) return false let len = this.getDomsWidth(n,i) + _this.tableHeader[n-1].width /2 arr.push(-len) setPreWith(n - 1) } setPreWith(i) const newArr = arr.reverse() return newArr},// 获取邻近宽度汇合getDomsWidth(k,j) { let _this = this let len = 0 for(let i = k; i < j; i++) { len = len + this.tableHeader[i].width } return len},const lineArr = this.getPreLine(i).concat([0]).concat(this.getNextLine(i)) // 中线数组汇合同样的，咱们应用一个dom来承载拖动的内容，点击时定义其宽高以及初始地位
// 拖动表头地位 this.draggingcell = true this.draggingDomVisible = true this.$refs.draggingDom.style.width = columnRect.width + 'px' this.$refs.draggingDom.style.left = columnRect.left - 20 + 'px' this.draggingText = this.tableHeader[i].label // 获取中线 let end = i; this.activedIndex = i // 阻止默认事件 document.onselectstart = function() { return false; }; document.ondragstart = function() { return false; };上面是拖动表头的鼠标挪动事件
const handleMouseMove = (event) => {//进行挪动const deltaLeft = event.clientX - this.dragState.startMouseLeft; // 理论位移间隔const proxyLeft = deltaLeft + columnRect.left - 20 // 位移后间隔右边间隔this.$refs.draggingDom.style.left = proxyLeft + 'px'; // 生成初始地位 // 点击处为原点，向左为负，向右为正，咱们只须要比照前后两个dom的中线即可 if(deltaLeft < 0) { this.dragState.direction = 'left' // 如果挪动间隔小于前一个dom中线时 if(deltaLeft < lineArr[end-1]) { removeClass(this.$el.querySelector('.column_'+ end),'dragging_left') removeClass(this.$el.querySelector('.column_'+ end),'dragging_right') --end addClass(this.$el.querySelector('.column_'+ end),'dragging_'+this.dragState.direction) } else if (deltaLeft >= lineArr[end]) { removeClass(this.$el.querySelector('.column_'+ end),'dragging_left') removeClass(this.$el.querySelector('.column_'+ end),'dragging_right') ++end addClass(this.$el.querySelector('.column_'+ end),'dragging_'+this.dragState.direction) } } else if((deltaLeft > 0)){ this.dragState.direction = 'right' if(deltaLeft > lineArr[end+1]) { removeClass(this.$el.querySelector('.column_'+ end),'dragging_left') removeClass(this.$el.querySelector('.column_'+ end),'dragging_right') ++end addClass(this.$el.querySelector('.column_'+ end),'dragging_'+this.dragState.direction) } else if(deltaLeft <= lineArr[end]) { removeClass(this.$el.querySelector('.column_'+ end),'dragging_left') removeClass(this.$el.querySelector('.column_'+ end),'dragging_right') --end addClass(this.$el.querySelector('.column_'+ end),'dragging_'+this.dragState.direction) } }};最初咱们来看一下鼠标抬起时事件
const handleMouseUp = (event) => { // 鼠标抬起时，咱们先移除以后的边线 removeClass(this.$el.querySelector('.column_'+ end),'dragging_left') removeClass(this.$el.querySelector('.column_'+ end),'dragging_right') end !== this.activedIndex && this.setThDom(end) // 此处能够将批改值传给后端 this.draggingDomVisible = false this.draggingcell = false this.dragState = {}; document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); document.onselectstart = null; document.ondragstart = null;}就像拖拽宽度一样，咱们同样须要监听鼠标事件
document.addEventListener('mousemove', handleMouseMove);document.addEventListener('mouseup', handleMouseUp);好了，这样拖拽的表格以及拖拽宽度就实现了。
本文参加了SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。