基于vue+vuedraggable实现拖拽布局效果

项目由配置布局页面+展示页面组成，实现配置布局效果后，前台展示效果

页面分为左右双栏布局，通过改变左右存储的模块实现拖拽布局

采用flex布局左右自适应

1.先介绍配置页面：

遍历模块数组渲染模块：

引入单页面模块组件：

初始化数据：

钩子函数获取页面布局：

在拖动结束的onEnd()事件中设置新布局：

附上拖拽相关的样式代码：

前台配置并缓存布局数据后，展示页面获取展示： 这里由于没有后台接口配合，便使用localStorage跨域存储的技术实现localStorage共享 展示页面拿到缓存里的layout后赋值给mainData即可展示：