vuedraggable
component
<template>
<div>
{{ form }}
<el-card class="box-card leftCard">
<vuedraggable v-model="list2" group="people">
<div v-for="item in list2" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
</div>
</vuedraggable>
</el-card>
<el-card class="box-card leftCard">
<vuedraggable v-model="list" group="people">
<div v-for="item in list" :key="item" class="item"><el-button>{{ item }}</el-button></div>
</vuedraggable>
</el-card>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
export default {
name: 'HelloWorld',
components: { vuedraggable },
props: {
},
data() {
return {
form: {},
attrs: { 'type': 'success' }, // , disabled: true
list: ['el-rate', 'el-tag', 'el-button', 'el-switch', 'el-slider', 'el-time-select', 'el-input'],
list2: []
}
},
methods: {
}
}
</script>
<style scoped>
.item{
300px;
height: 50px;
}
</style>