中文文档地址:

vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html1.安装

npm i -S vuedraggable

2.引入

import draggable from 'vuedraggable'

3.使用

 :key="keyDate" 改变 listBak时,刷新图表显示

<template><div><!-- 调用组件  --><el-row :gutter="20"><el-col :span="4"><el-row style="background-color: #55ff7f"><draggable v-model="list" :group="groupA" class="dragBox" animation="100" @end="refreshKay"><div v-for="(item, index) in list" :key="index" class="show-li">{{ item.name }}</div></draggable></el-row></el-col><el-col :span="12" :key="keyDate"><el-row style="background-color: #55ff7f"><draggable v-model="listBak" :group="groupB" animation="100" class="dragBox" @end="refreshKay"><el-col v-for="(item, index) in listBak" :key="index" :span="item.width"><div @click="showTest(item)"><component :is="item.id" v-if="listComponents.includes(item.id)"></component></div></el-col></draggable></el-row>'查看顺序:' {{listBak}}</el-col><el-col :span="8"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="名称"><el-input disabled v-model="form.name"></el-input></el-form-item><el-form-item label="宽度"><el-input v-model="form.width"></el-input></el-form-item></el-form><el-button type="primary" @click="updateTest">立即更新</el-button><el-button type="primary" @click="delTest">删除</el-button></el-col></el-row></div>
</template><script>
// 引入拖拽组件
import draggable from 'vuedraggable'export default {name: 'index',components: {// 注册draggable组件draggable,China: () => import('@/view/echarts/map/China'),Shandong: () => import('@/view/echarts/map/Shandong')},data() {return {listComponents: ['Shandong', 'China'],listBak: [],form: {id: '',name: '',width: 0},keyDate: 'T',list: [{id: 'China',name: '中国',width: 24},{id: 'Shandong',name: '山东',width: 24}],groupA: {name: 'test',pull: true, // 可以拖出put: false // 可以拖入},groupB: {name: 'test',pull: false,put: true}}},methods: {showTest(param) {this.form = JSON.parse(JSON.stringify(param))},updateTest() {this.listBak.forEach(i => {if (i.id === this.form.id) {i.width = this.form.width}})this.refreshKay()},delTest() {// 获取元素在数组的位置let num = -1for (let i = 0; i < this.listBak.length; i++) {let item = this.listBak[i]if (item.id === this.form.id) {num = i}}// 删除元素if (num !== -1) {this.list.unshift(this.form)// 加回原数组this.listBak.splice(num, 1)// 从当前数组删除}this.refreshKay()},refreshKay() { // 刷新整体页面this.keyDate = 'T' + new Date()}}
}
</script><style scoped>
.dragBox {padding: 20px;min-height: 300px;
}
.show-li {padding: 6px;background-color: #fdfdfd;border: solid 1px #eee;margin-bottom: 10px;cursor: move;
}
.show-li:hover {background-color: #f1f1f1;cursor: move;
}</style>