拖拽插件sortable.js实现el-table表格拖拽效果拖拽插件sortable.js实现el-table表

问题描述
案例一简单拖拽
代码附上
案例二 el-table表格拖拽

效果图
代码附上

问题描述 【拖拽插件sortable.js实现el-table表格拖拽效果】Sortable.js是一款优秀的js拖拽库，因为是原生js写的，所以性能不错，也支持移动端哦。本文举两个案例来学习一下。

案例一简单拖拽效果图

文章图片

代码附上关于理解看注释哦，运行的话复制粘贴即可

sortable.js拖动例子#wrapBox {width: 360px; /* 拖动容器的高度，由拖动项的高度撑开 */height: auto; }#wrapBox div {padding: 8px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; /* 添加鼠标悬浮样式为移动的样式，要不然不好看 */cursor: move; font-size: 13px; }/* 设置鼠标按下时候的样式，加了好看些 */#wrapBox div:active {background-color: #eee; }优先扣款顺序：工商银行建设银行中国银行农业银行交通银行

案例二 el-table表格拖拽这里有一个细节，就是表头数据拖动的时候，可能导致渲染数据不对的问题，有的博主是搞两个表头数组数据的，其实也是一种解决问题的方案。不过个人愚见略有麻烦，其实一个表头数组数据即可。只要及时清空，重新赋值即可

效果图

文章图片

代码附上
这里使用的是vue，所以要下载哦 cnpm install sortablejs --save
代码直接复制粘贴即可运行看效果图了，关于使用请看注释哦

.myWrap {width: 100%; height: 100%; box-sizing: border-box; padding: 25px; /deep/ .el-table {.el-table__header-wrapper {tr {th {// 设置拖动样式，好看一些cursor: move; }}}}}