首先我们看下最终的交互效果:
此功能是针对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,
