yarn add vuedraggable
npm i -S vuedraggable
在需要实现拖拽功能的页面中直接引入
import Sortable from 'sortablejs'
<script>
// 拖动
drag () {
// 首先获取需要拖拽的dom节点
const el1 = document.querySelectorAll('.edit-form-item .el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0];
Sortable.create(el1, {
disabled: false, // 是否开启拖拽
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时,效果更好看
group: { // 是否开启跨表拖拽
pull: false,
put: false
},
onEnd: (e) => { // 这里主要进行数据的处理,拖拽实际并不会改变绑定数据的顺序,这里需要自己做数据的顺序更改
let arr = this.Data; // 获取表数据
arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
this.$nextTick(function () {
this.Data= arr;
});
}
});
}
</script>
<style lang="less" type="text/less">
.sortable-ghost {
opacity: 0.4;
background-color: #F4E2C9;
}
</style>
在使用的页面中引入
import Draggable from 'vuedraggable'
然后在components中注册组件
components: {
Draggable
}
在template模板中使用
<draggable v-model="tableData">
<div v-for="item in tableData" :key="item.id" class="item">
{{item.name}}
</div>
</draggable>
js方法跟上面一致
大功告成