浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽（1）

前言：在当前主流的PC界面实现方案中，为了给客户更好的体验，我们需要实现多种布局方式

• 一列布局（100%）
• 两列布局（50%，50%）
• 三列布局（33%，33%，33%）

• 左右布局（3 7分布，7 3分布）

  
  图片（1）
  图片（2）
  
  图片（3）

图片1，2是其中的两种布局效果图，3版式布局样式

使用element UI实现布局方案

js布局数据

vue渲染布局

在layTable选择不同的布局方式后，，查找beforeblocks对应布局，赋blocks,在vue文件渲染blocks,使用element ,通过控制布局。

这样就可以通过不同选择实现版式布局了。