大家好，我是知余，一个入行快1年的前端小菜鸟，这是我的第一篇掘金文章，主要是记录自己在工作中学到的技术，并记录。同时希望这篇文章对有需要的同行，给与一定的启发和帮助。 开发表单设计器之前，你需要对 Vue.Draggable有一定程度的了解。📚
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。
传送门👉🚪Vue.Draggable官网
传送门👉🚪# vue.draggable中文文档
1.新建Vue项目
vue create form-design-vue
2.目录结构
项目新建完成后，我们对表单设计器的UI原型预设一个大概的结构，按照功能区分，预计分为左侧-表单组件模块、中间-展示模块、右侧-属性模块，至此可以开始搭建相应的目录。类似⬇️
...
├──src
│ ├──components
| |──formCenter.vue // 中间展示模块
| |──formCmpConfig.vue // 右侧属性模块
│ ├──config
| ├──formCmpConfig.js // 左侧组件配置
| |——formCmpUi
| ├──formCmpUi.vue // 渲染表单组件模块
│ ├──view
| ├──formDesign.vue // 表单设计组件
| ├──formViewer.vue // 表单展示组件
...
3.开始书写代码啦！！！🏄
3.1 页面基本结构
（css样式就不贴出来啦，基本实现左中右布局即可，文章结尾会贴出源码地址）
3.2 先实现左侧表单组件( •̀ ω •́ )✧！
想实现左侧的这种形式，我们首先想到的数据类型应该是数组，单独抽离数据到formCmpConfig.js 也是为了代码方便维护。
数据和样式渲染完毕后，现在我们就要实现拖动了。😆
👉安装并引入Vue.Draggable
npm i -S vuedraggable
完善formDesign.vue左侧组件代码，这里着重说明一下draggable插件的group属性
🌞gruop
| 属性 | 值 | 描述 |
|---|---|---|
| name | string | 组名 |
| put | tru/false/function | 是否允许拖出当前组 |
| pull | true/false/function | 是否允许拖入当前组 |
draggable的中的gruop.name相同,不同的组才可以实现内部数据的拖动
3.3 完善formDesign.vue
为了保证几个模块之间的数据相互联系且不会出错，我们将中间展示区域的forItemList定义在最外层的formDesign.vue组件，通过Vue的provide和injec将外层formDesign实例传递给每个模块，保证之后每个模块操作的数据是同一个数据。
3.4 中间展示组件formCenter.vue
我们知道，draggable的中的gruop.name相同,不同的组才可以实现内部数据的拖动，所以formCenter.vue中，核心同样是draggable包裹的一个组，且组名相同，才能实现两个组的拖拽。
现在我们已经可以实现组件的拖拽了，但还需要编写draggable的add拖拽完成事件，来进行渲染页面UI😵，查阅draggable的官方文档，add事件默认有一个evt对象，里面包含了被拖拽元素的实例。
生成唯一id原因我相信大家肯定都知道啦！！！😜
现在我们就已经实现了拖拽功能90%了，现在还需要完成组件拖拽的最后一步，渲染对应的UI组件，拖拽功能就做好啦！😎
3.5 formCmpUi渲染表单组件模块
通过传入被拖拽组件的实例的type，渲染对应的UI组件
在formCenter.vue中引入并注册formCmpUi渲染表单组件模块
至此，我们的拖拽功能就做完了！！！👏👏👏
3.6 右侧属性配置组件
我分为了表单属性和组件属性两个方面
在formDesign.vue中引入并注册
一个表单设计的基本功能就实现了，后续就需要完善其他功能，如组件的删除、复制、表单预览等等，这里就不一一展示咯，因为写到这里，那些功能我相信大家都可以写出来😎，如果还有疑问，可以直接去我的仓库下载源码研究。如果感觉篇文章对你有用，请不要吝啬你的👍呀。
