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

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

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

vuedraggable拖拽生成组件

静态效果如下：

 第一步：下载依赖：

npm i -S vuedraggable

第二步：在项目中引入：

import draggable from "vuedraggable";

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

属性：

 事件：

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

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

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

第四步：在代码里使用 html

1. <template>
2. <div>
3. <div class="">
4. <draggable
5. v-model="applyList"
6. :group="{ name: 'piece', pull: 'clone', put: true }"
7. animation="100"
8. :sort="false"
9. :clone="addComponent"//左边应用组数据
10. >
11. <div class="employ" v-for="item in applyList" :key="item.id">
12. <span class="nr">{{ item.name }}span>
13. div>
14. draggable>
15. div>
16. <div class="">
17. <draggable
18. v-model="applyList"
19. :group="{ name: 'piece', pull: 'clone', put: true }"
20. animation="100"
21. :sort="false"
22. :clone="addComponent"//左边应用数据
23. >
24. <div class="employ" v-for="item in applyList" :key="item.id">
25. <span class="nr">{{ item.name }}span>
26. div>
27. draggable>
28. div>
29. <div>
30. <draggable v-model="onList" group="piece" animation="100">//右边空数组
31. <transition-group :style="style">
32. <div class="myEmploy" v-for="item in onList" :key="item.id">
33. <span class="zjNr"
34. >{{ item.name }}
35. <div class="ddd">
36. <draggable
37. v-model="item.myList"//父级空数组
38. :group="{
39. name: 'theChild',
40. pull: 'clone',
41. }"
42. animation="100"
43. :clone="cloneComponent"
44. :sort="true"
45. >
46. <transition-group :style="style">
48. <div class="caTion" :key="item.id">
49. <div
50. class="suBAppLicaTion"
51. v-for="(it, idx) in item.myList"//子级空数组
52. :key="idx"
53. >
54. <i
55. class="el-icon-circle-close myDelete"
56. @click="onDelete(idx)"
57. >i>
58. <img :src="it.url" alt="" />
59. <span class="ziNr">{{ it.name }}span>
60. div>
61. div>
62. transition-group>
63. draggable>
64. div>
65. span>
66. div>
67. transition-group>
68. draggable>
69. 从左侧拖入或点选组件进行应用组合
70. div>
71. div>
72. template>

js：

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