BI磁吸布局 (2) 基于react-grid-layout扩展的布局方式
上一篇深入react-grid-layout源码已经讲了其实现，但是react-grid-layout目前并不支持嵌套拖拽等，因为其底层没有处理。
这一篇是基于react-grid-layout扩展的，支持可嵌套的一些思路以及实现。
这是react-grid-layout的实现
我们的思路大概是这样的
- 舍弃掉DraggableCore层，舍弃mouse事件，改成drop事件
- 给每个item监听onDragStart，通过盒子监听onDragOver获取元素移动事件，通过onDragOver判断是否到当前的容器，通过onDragLeave判断是否离开了当前容器。
- 因为是多个容器，所以需要一个Context上下文存储对应的变量。
先看下效果
Context层
因为是多个容器的，所以需要一个contetxt层来记录一些变量，以及做滚动处理，比如鼠标拖拽移动到页面上方/下方，窗口要跟着滚动。
Layout-Item层
主要是去掉core层，去掉mouse事件，改成监听onDragStart事件。记录当前的位置信息。
Layout-box层
主要是监听drop等相关事件。具体的流程是
单层拖拽
- 点击 item.onDragStart
- box.onDragStart
- 拖拽 触发 box.onDragOver
- 触发item的moveDroppingPostion 触发 item.onDrag
- 放下 触发box.onDrop
- 触发 item.onDragStop
- 清除变量，触发onChange修改外部layout。
- 触发onDragEnd事件，兼容拖动到窗口外放下的情况。
两容器之间拖拽
- 点击 item.onDragStart → box.onDragStart 拖拽 box.onDragOver → moveDroppingPostion → item.onDrag (单层拖拽逻辑)
- 移到另一个容器box2 触发 box1.onDragLeave（记录当前离开盒子box1相关信息） → box2.onDragEnter(在box2中新创建一个newItem) → box2.onDragOver → newItem.moveDroppingPostion → newItem.onDragStart/item.onDrag
- 放下 box2.onDrop → box2.onPropDrop（触发对应事件，只有两个容器需要触发onChange，一个是最后放下的容器，一个是最开始离开的容器，其他经过的容器的结构是一定不会变的）
嵌套拖拽
- 点击 item.onDragStart → box.onDragStart 拖拽 box.onDragOver → moveDroppingPostion → item.onDrag
- 移动子容器里面 box1.onDragLeave(记录box1相关信息) → box2.onDragEnter → box2.onDragOver → moveDroppingPostion → item.onDragStart/item.onDrag
- 放下 box2.onDrop → box2.onPropDrop（触发onChange）
嵌套拖拽/两容器拖拽的逻辑其实差不多。
单层拖拽实现逻辑
…
嵌套拖拽实现逻辑
…
边界判断
…
其他问题解决
…
未完待续…