最近写项目使用到了vuedraggable这个插件，进行组件生成，由于第一次使用，就上网搜相关文章，结果网上基本上都是上下拖拽之类的，没有找到自己想要的结果，然后就根据自己的需求结合相关文档进行了开发
开发完后大概结果视频如下：
vuedraggable拖拽生成组件
静态效果如下：
第一步：下载依赖：
npm i -S vuedraggable
第二步：在项目中引入：
import draggable from "vuedraggable";
第三步查看相关属性和方法：
属性：
事件：
属性和事件使用方法请详看 官网：
中文（国人翻译，可能更新不及时）：vue.draggable中文文档 -
英文：/vue-draggable/tutorial.html
第四步：在代码里使用 html
<template><div><div class=""><draggablev-model="applyList":group="{ name: 'piece', pull: 'clone', put: true }"animation="100":sort="false":clone="addComponent"//左边应用组数据><div class="employ" v-for="item in applyList" :key="item.id"><span class="nr">{{ item.name }}</span></div></draggable></div><div class=""><draggablev-model="applyList":group="{ name: 'piece', pull: 'clone', put: true }"animation="100":sort="false":clone="addComponent"//左边应用数据><div class="employ" v-for="item in applyList" :key="item.id"><span class="nr">{{ item.name }}</span></div></draggable></div><div><draggable v-model="onList" group="piece" animation="100">//右边空数组<transition-group :style="style"><div class="myEmploy" v-for="item in onList" :key="item.id"><span class="zjNr">{{ item.name }}<div class="ddd"><draggablev-model="item.myList"//父级空数组:group="{name: 'theChild',pull: 'clone',}"animation="100":clone="cloneComponent":sort="true"><transition-group :style="style"><!-- 子应用 --><div class="caTion" :key="item.id"><divclass="suBAppLicaTion"v-for="(it, idx) in item.myList"//子级空数组:key="idx"><iclass="el-icon-circle-close myDelete"@click="onDelete(idx)"></i><img :src="it.url" alt="" /><span class="ziNr">{{ it.name }}</span></div></div></transition-group></draggable></div></span></div></transition-group></draggable>从左侧拖入或点选组件进行应用组合</div></div></template>
js：
<script>import draggable from "vuedraggable";export default {components: {draggable,},data() {return {applyList: [{name: "前端小脑虎",id: 1,},{name: "关注我，不迷路",id: 2,},{name: "vue问题大全",id: 3,},{name: "欢迎来到深圳",id: 4,},],useList: [{url: require("../../assets/images/profile.jpg"),name: "学习呀",id: 5,},{url: require("../../assets/images/profile.jpg"),name: "前端耐斯",id: 6,},{url: require("../../assets/images/profile.jpg"),name: "前端小脑虎",id: 7,},{url: require("../../assets/images/profile.jpg"),name: "深圳欢迎你",id: 8,},],list: [{url: require("../../assets/images/profile.jpg"),name: "互连网+",id: 1,},{url: require("../../assets/images/profile.jpg"),name: "直装直提",id: 2,},],onList: [],myList: [],style: "min-height:120px;display: block;",utilize: false,AppGroup: false,};},methods: {// 删除onDelete(idx) {this.onList.forEach((item) => {const id = item.myList[idx].id;item.myList.splice(idx, 1);console.log("item", item.myList);});},// 子应用添加newSubAppLicaTion(item) {const clone = this.cloneComponent(item);this.onList.forEach((item) => {if (item.myList) {item.myList.push(clone);} else {item.myList = [clone];}});},// 应用组添加addComponent(item) {let exist = false;this.onList.forEach((it) => {//遍历onList，判断是否当前拖拽的应用组内容是否存在，存在就赋值exist为true并returnif (it.id == item.id) {exist = true;return;}});if (exist) {//根据exist来判断，为true就return，false就push进去this.$message({message: "组件里已经有相同的应用组啦，请拖拽其他应用组哦",type: "warning",});return;} else {const clone = item;this.onList.push({ ...clone, myList: [] });}},// 应用复制cloneComponent(origin) {let exist = false;this.onList.forEach((item) => {item.myList.forEach((it) => {//遍历myList，判断是否当前拖拽的应用内容是否存在，存在就赋值exist为true并returnif (it.id == origin.id) {exist = true;return;}});});if (exist) {//根据exist来判断，为true就return，false就push进去this.$message({message: "组件里已经有相同的应用啦，请拖拽其他应用哦",type: "warning",});return;} else {const clone = origin;return clone;}},onEnd() {this.drag = false;},save() {},// 编辑},};</script>
以上就是这个插件在项目中使用的流程 如果有不懂可以私信我
