js/jquery 按住滑鼠左鍵圈選網格，圈選網格顏色變深， 圈選區域不可重疊，被選中的網格位置上填充可輸入內容，插入圖片、媒體，表格、echarts圖表等的容器。並且網格上的容器可拖動，可改變尺寸，但不可重疊（如果重疊回到上一次的狀態），

上述要求為本次實際開發專案（vue框架）中的要求，目的是讓使用者建立自定義報告內容。因為將這部分互動功能單獨封裝了起來，所以分享出來還是希望和大家互相學習。

操作流程如下所示：

一、按住滑鼠左鍵拖動滑鼠，在網格上拖動滑鼠即可畫出滑鼠圈選的區域，如下圖所示：

二、鬆開滑鼠之後被選擇的網格上覆蓋一個容器，可直接輸入內容，也可插入圖片（插入圖片本次沒有演示），如下圖所示：

三、容器左上角的加深顏色區域（輸入劃入容器上顯示，劃出容器隱藏），可拖動當前容器在網格區域內移動，右下角可改變當前容器在網格區域內的尺寸。如下圖所示：

上圖所示：在網格區域內用滑鼠圈選出三個容器，對中間的容器拖拽、改變尺寸如果操作過程中和其他任意一個容器有重疊現象當滑鼠鬆開的時候，該容器迴歸到上一次的狀態（位置和尺寸）。