js按住鼠标左键选中网格元素，被选中的网格位置上填充可输入内容，插入图片等的容器。并且网格上的容器，可拖动、改变尺寸、但互相之间不可重叠（如果重叠回到上一次的状态）。

js/jquery 按住鼠标左键圈选网格，圈选网格颜色变深， 圈选区域不可重叠，被选中的网格位置上填充可输入内容，插入图片、媒体，表格、echarts图表等的容器。并且网格上的容器可拖动，可改变尺寸，但不可重叠（如果重叠回到上一次的状态），

上述要求为本次实际开发项目（vue框架）中的要求，目的是让用户创建自定义报告内容。因为将这部分交互功能单独封装了起来，所以分享出来还是希望和大家互相学习。

操作流程如下所示：

一、按住鼠标左键拖动鼠标，在网格上拖动鼠标即可画出鼠标圈选的区域，如下图所示：

二、松开鼠标之后被选择的网格上覆盖一个容器，可直接输入内容，也可插入图片（插入图片本次没有演示），如下图所示：

三、容器左上角的加深颜色区域（输入划入容器上显示，划出容器隐藏），可拖动当前容器在网格区域内移动，右下角可改变当前容器在网格区域内的尺寸。如下图所示：

上图所示：在网格区域内用鼠标圈选出三个容器，对中间的容器拖拽、改变尺寸如果操作过程中和其他任意一个容器有重叠现象当鼠标松开的时候，该容器回归到上一次的状态（位置和尺寸）。

代码太多，并且代码里有注释，所以放到了GitHub上。

GitHub地址：https://github.com/dengzeyuan/js-mouse-click-chose-area-drag-sizechange