携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
通过可视化的形式拖拽组件的生成表单，可以把整个过程进行拆分：
- 组件拖拽的实现
- 拖拽后如何生成真正的表单项
- 表单项的移动、复制、删除等
- 表单项各个属性的配置
可拖拽的组件字段如下：
整个表单设计器的核心部分，就是拖拽功能的实现。
一、拖拽组件的选择：
1、vue draggable ：
官方Demo指路（Vue3版本）：sortablejs.github.io/vue.draggab…
点击 View code 可跳转到对应代码实现页面
安装：
yarn add vuedraggable
npm i -S vuedraggable
Vue3：
遇到 Cannot read property 'header' of undefined 的错误是因为没有安装最新版本
npm i -S vuedraggable@next
引入：
import draggable from 'vuedraggable'
2、sortable：
官方指路： www.sortablejs.com/index.html
方法：
npm install sortablejs --save
或者script引入
<script src="../../js/Sortable.min.js"></script>
3、Vue drag resize
特点：轻量，支持拖拽和缩放；支持触摸，对移动端友好。适合有缩放的场景。
二、draggable
在Element-UI el-table中使用 sortabe 较好（也就是用来实现表格的拖拽功能）；表单的拖拽使用 vuedraggable 居多，适应大多数应用场景，包括表格的拖拽也有很好的支持，所以在这里我们使用 vuedraggable来实现。
1. 基础功能实现
<draggable
v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>
export default {
components: {
draggable,
},
data() {
return {
drag: false,
}
}
}
常用的参数：
- :list="state.list" //需要绑定的数组
- ghost-class="ghost" //被替换元素的样式
- chosen-class="chosenClass" //选中元素的样式
- animation="300" //动画效果
- @start="onStart" //拖拽开始的事件
- @end="onEnd" //拖拽结束的事件
2. 插槽的使用
使用方式：#item="{element, index}"
Vue.draggable 将迭代列表，item 插槽可以收元素值和元素索引用，于显示列表中的项目。 element为迭代出来的列表中元素， index为元素索引。
所以在这种实现方式中，往往不需要使用 v-for 就可以实现拖拽组件的绘制。
3. vue2 与 vue3 中的差别
vuedraggable 在vue2 与 vue3 中写法会有所不同。vue2中原本是配置项的形式，在 vue3 中一些参数也需要单独进行配置。
以上面的插槽为例，在 Vue2 中的写法：
<draggable v-model="myArray">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
