vue实现表格列位置的拖拽

首先我们看下最终的交互效果:

此功能是针对vue项目的表格拖拽,以自定义指令的形式来完成交互的.

主要原理的dom节点的交换;

交互思路:

1.首先要获取当前点击的th,并且在页面创建一个大小内容和th一模一样的div.并设置当前div的样式始终随着鼠标.

2.将页面上所有的th的宽度保存到一个数组中(thWidthArr),获取保存下来当前点击的th的index(directionIndex),和鼠标拖动到最后松开的时候所停留的th的index(finallIndex);

3.当鼠标拖拽到确定的位置,将最初始的th和插入到当前位置(通过directionIndex和finallIndex来确定)

完整代码请移步:https://github.com/slailcp/vue-dragTable 哦

自定义指令名字叫做 "slldrag" 使用的时候就是v-slldrag,