拖拉拽实现
今天分享一下类似于凡科网的拖拽页面实现 以及 如何自定义化小程序界面（小程序如何动态加载组件）
如下图效果：
备注：上图右边的小程序的样式 是随左边的后台模板设计而动态的改变的
要想实现整个流程 特从2大环节来分享
第一环节
后台模板设计：
使用技术要点：
- 非vue项目使用 sortable.js
- Vue项目 使用vuedraggable组件
(实现拖拽)
非vue项目
Vue项目
Npm install vuedraggable
import draggable from 'vuedraggable'
不管是vue项目还是非vue项目 底层实现拖拽的逻辑大致一样,如下：
先用一个大的元素 把需要拖拽的元素包裹起来，再去安排每一个需要拖动的元素
例如：
（一）非vue项目（最外层指定一个属性id 此处为contentltm）
然后在js代码指定这个元素里面具体那些子元素可以拖动 一般为div
（二）vue项目
当安装好vuedragable组件后 最外层的大元素不再是原生的div 而转为draggable组件
该组件参数参考开发文档
sortablejs.github.io/Vue.Draggab…
以下已几个重要的参数 稍微讲解一下
list 此为一个数组 里面每一个值就是一个元素
change事件 当我们试图改变元素的位置时触发
add事件 当添加元素时触发
end事件 当移动整个元素结束时触发
如上：则可以实现元素的拖动效果
测试demo连接：
非vue项目：
newsaas.guangzhouzhuangxiu01.cn/CIPKeogzAx.…
vue项目：
saas.guangzhouzhuangxiu01.cn/vuedrag/dis…
以上我们完成了在页面上实现拖拽的功能 ，自此我们是可以让用户自由的搭建他们想要的排版的样式，那么就引出了第二步的问题
假想一下：我们实现定义好了20个div 对应着20个不同的组件 每个组件里面有着属于组件自己的功能 此时 当用户随机在这个20个div里找到自己想要的 并对这些进行了拖拉拽排序 ，那么用户的小程序又要如何按照用户设计的那样显示出来。
第一步 我们先要保存好用户已经设计好了界面 那么要用什么样的格式来保存数据
- 数组 单纯的保留组件的名称 所有的组件功能是写死的 只给用户排版的能力（公司买的花店小程序后台）
- Json数组 把组件名称 和 组件所需要的数据 全部存放其中，这样用户的体验更加灵活但是代码就会更加的冗余
我们把用户排版好的数据按照json的形式存放到数据库，当页面渲染时 通过wxappid调用获取到这个json数组 就可以了
到此 整个流程看似结束了 ，但是坑来了
我们需要界面动态的渲染这些后端返回给我们的组件
首先 我们百度下vue 是如何动态渲染组件的
可以看到 vue是通过compontent 来根据组件名 动态渲染组件，但不幸的是 小程序不支持compontent 当你使用时会飘红
不能用compontent来实现动态渲染组件 只有用最原生的办法 通过for循环来加载我们的组件
方法如下图所示：
先定义并导入我们写好的组件
页面加载时通过接口获取到用户自己定义的组件列表
通过for循环来加载我们的组件 注意 v-if 根据组件名来判断显不显示它
到此为止 我们已经实现了一个小型的凡科网
最后送给摸鱼的大家一句话：
让代码帮我们办事
别让我们写代码办事
