vuedraggable拖拽任意组件并改变数据排序

1 . 下载

文档传送门

npm i vuedraggable

2 . 在需要的页面引入(也可全局引入看自己需求)

2.1 按需引入

import Vuedraggable from 'vuedraggable'export default {components: {Vuedraggable}
}

2.2 全局引入

// main.js
import draggable from 'vuedraggable'
Vue.component('draggable', draggable)

#3 . 示例代码（全局引入写法）

3.1 以下为拷贝拖拽

<template><div class=""><!-- 可拖拽区域 --><div><draggable v-model="btnList" @end="ends()" :options="{group: { name: 'itxst', pull: 'clone', put: false },sort: true,}" animation="300"><el-button type="warning" round v-for="(item, index) in btnList" :key="index">{{ item.name }}</el-button></draggable></div><el-divider></el-divider><!-- 拖拽值接收区域 --><el-form ref="form" label-width="auto"><el-form-item label="展示字段X"><draggable v-model="draggableDataX" class="draggable-data" :options="{group: { name: 'itxst', pull: 'clone' },sort: true,}" animation="300"><div class="draggable-border"><el-tag v-for="(tag, index) in draggableDataX" :key="index" closable @close="tagClose(index,'X')" type="info">{{ tag.name }}</el-tag></div></draggable></el-form-item><el-form-item label="展示字段Y"><draggable v-model="draggableDataY" class="draggable-data" :options="{group: { name: 'itxst', pull: 'clone' },sort: true,}" animation="300"><div class="draggable-border"><el-tag v-for="(tag, index) in draggableDataY" :key="index" closable @close="tagClose(index,'Y')" type="info">{{ tag.name }}</el-tag></div></draggable></el-form-item></el-form></div>
</template><script>
import Vuedraggable from 'vuedraggable'
export default {name: '',props: {},components: {Vuedraggable},data () {return {draggableDataX: [], // 拖拽后数据会动态填入draggableDataY: [], // 拖拽后数据会动态填入btnList: [{ name: "按钮1" },{ name: "按钮2" },{ name: "按钮3" },{ name: "按钮4" },{ name: "按钮5" },],}},computed: {},watch: {},created () { },mounted () { },methods: {ends () { },tagClose (index, type) {if (type === 'X') {this.draggableDataX.splice(index, 1);} else {this.draggableDataY.splice(index, 1);}},},
}
</script> <style scoped lang="less">
.draggable-data {width: 100%;height: 50px;border: 1px solid #d9d9d9;overflow: auto;display: flex;align-items: center;
}
</style>