vue-grid-layout外部拖拽新增时模块超出grid-layout导致显示错乱的问题

问题描述

用vue-grid-layout做拖拽配置功能的时候不一定每个拖拽模块都是1x1的大小，当模块宽度大于1时，直接复制示例10的代码会出现显示问题

当grid-layout内部有其他已配置模块时，还会出现占位阴影与已有模块重叠显示的问题

解决方案

通过示例代码自带的alert可以看到拖拽结束时模块的x是3，位于最后一列，x+w已经超出了colNum=4的配置，文档里没有dragEvent方法的详细说明，打断点发现传入对象的x：3在经过第一层处理后获取对象的x就已经变成0了

不过对于解决问题来说dragEvent如何处理的对象这不是很重要，总的来说，就是未处理的情况下数据卡了个bug，为了把超出容器的模块强行纳入容器重置了它的形式起始位置（阴影位置），而容器计算碰撞的时候仍然是通过它的事实位置（x,y,w,h构成的长方形实际所在位置）进行的，事实位置未与已有模块重叠，所以覆盖也就被允许了

解决方法就是把传入数据处理一下，当x+w>=colNum时，给draEvent方法传的x都处理成colNum-w就行，即将其位置固定在右侧内部边缘，直到鼠标移出容器，拖拽项从数据列移除。

 let newPos = el.calcXY(
        (mouseXY.y ?? 0) - (parentRect?.top ?? 0),
        (mouseXY.x ?? 0) - (parentRect?.left ?? 0)
      )
      
 // 4是 <grid-layout>设置的col-num，item是当前拖拽的配置项
 newPos = {
        x: newPos.x + item.width < 4 ? newPos.x : 4 - item.width,
        y: newPos.y,
      }

其他

1. dragEvent: function dragEvent(eventName, id, x, y, h, w)
   这个函数的传值还挺反直觉的，总觉得默认顺序应该是x,y,width,height
2. 父 DIV 容器上使用效果“transform： scale” 时，无法正确拖拽gird-item(具体表现为想拖拖不过去，轻轻一拖其他无关gird-item就乱跑)的bug虽然文档没写但是起始已经修复了，transformScale传下值就行 github地址