Vue-draggable 实现页面模板自动化

支持组件：

 广告轮播，导航菜单，导航魔方，分割线，商品搜索条，商品列表，店铺列表，代金券列表，活动列表，文章列表，视频列表，相册列表，直播列表。

功能说明：

1.从左侧拖入组件到中间容器内。左侧组件不变，只是clone节点到中间容器。 

2. 中间容器不可再拖入左侧。中间容器各个部件可以在容器内上下拖动进行排序。

3. 支持同类型多组件。从左侧拖入相同组件的时候，会先从中间容器拷贝同类型的部件。重用样式。每个部件id值唯一。

4. 中间容器 选中某个部件，在选中的部件右上角显示删除按钮。右边显示对应的部件属性。

5. 修改右边对应的部件属性，中间容器对应的部件可实时显示效果。

6. 右边部件的属性根据 每个部件的类型不同而决定。

7. 中间容器下方底部可设置大容器的页面背景颜色。

9. 最后提交保存全部部件的属性。这样就完成了一个页面模板。 下次页面模板编辑的时候，页面进入直接显示实时效果。

原理文章分析：