问题描述
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代码直接复制粘贴即可运行看效果图了，关于使用请看注释哦
表头数据
{{ tableHeader }}
表体数据
{{ tableBody }}
.myWrap {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 25px;
/deep/ .el-table {
.el-table__header-wrapper {
tr {
th {
// 设置拖动样式，好看一些
cursor: move;
}
}
}
}
}
【拖拽插件sortable.js之el-table表格拖拽效果代码】好记性不如烂笔头，记录一下吧
^_^最后附上官网： http://www.sortablejs.com/
或 https://www.itxst.com/sortabl...
