vue使用vuedraggable拖拽组件，进行组件生成(vue使用jquery)

vue使用vuedraggable拖拽组件，进行组件生成

推荐整理分享vue使用vuedraggable拖拽组件，进行组件生成(vue使用jquery)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue使用计算属性声明在什么配置项中,vue使用jquery,Vue使用虚拟DOM的特点,vue使用什么软件开发,vue使用vuedraggable可拖拽区域,vue使用vuedraggable可拖拽区域,vue使用jquery,vue使用jquery,内容如对您有帮助，希望把文章链接给更多的朋友！

最近写项目使用到了vuedraggable这个插件，进行组件生成，由于第一次使用，就上网搜相关文章，结果网上基本上都是上下拖拽之类的，没有找到自己想要的结果，然后就根据自己的需求结合相关文档进行了开发

开发完后大概结果视频如下：

vuedraggable拖拽生成组件

静态效果如下：

 第一步：下载依赖：

npm i -S vuedraggable

第二步：在项目中引入：

import draggable from "vuedraggable";

第三步查看相关属性和方法：

属性：

 事件：

 属性和事件使用方法请详看 官网：

中文（国人翻译，可能更新不及时）：vue.draggable中文文档 - itxst.com

英文：https://www.itxst.com/vue-draggable/tutorial.html

第四步：在代码里使用 html

<template><div><div class=""> <draggable v-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=""> <draggable v-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"> <draggable v-model="item.myList"//父级空数组 :group="{ name: 'theChild', pull: 'clone', }" animation="100" :clone="cloneComponent" :sort="true" > <transition-group :style="style"> <!-- 子应用 --> <div class="caTion" :key="item.id"> <div class="suBAppLicaTion" v-for="(it, idx) in item.myList"//子级空数组 :key="idx" > <i class="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并return if (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并return if (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>

以上就是这个插件在项目中使用的流程 如果有不懂可以私信我