背景：
1、首页模板由多个子组件组成，如图表、新闻、公告、轮播图等，一般都由前端引入子组件，写在固定的位置上，最终形成一个固定的首页模板；
2、像这样直接在代码中写死的首页没有灵活性，不同用户想展示出来的首页模板千篇一律；
3、若是首页模板可以根据用户自己的需求拖拽生成，首页模板的灵活性与交互性将会两者兼备。
描述：
1、通过使用draggable拖拽插件可实现自由拖拽子组件；
【拖拽插件 draggable 详解及意见 - 掘金】
2、draggable可实现左右拖拽，若想完全根据用户的意愿上下左右都可拖拽，在这里我使用的是grid网格布局实现相应功能。
【CSS Grid 网格布局教程 - 阮一峰的网络日志】
测试案例展示：
1）左边为子组件列表，暂时使用色块代表可组成首页的所有组件；
2）右边为拖拽区域，拖拽区域由grid网格布局作为背景板，子组件可根据手动设置的网格布局的大小进行放置；
3）拖拽后的子组件提供了编辑、删除、拖拽三项功能，编辑可控制该子组件的宽高比例，删除后则回到左部组件列表中，拖拽可实现各个子组件之间的位置交换。
代码展示：
一、子组件列表
循环dataList拿到子组件对象数组，鼠标放置时增加遮罩层，显示该子组件的宽高比例、名称；draggable是可拖拽的子组件列表区域，通过dragOptions1进行对拖拽区域内容的控制。
:data-width="item.width" :data-height="item.height" :class="[ 'item', 'item_width_' + item.width, 'item_height_' + item.height, 'item_' + item.component ]" v-for="(item, index) in dataList" :key="index" > {{ item.title }}{{ item.width }}×{{ item.height }}