用React Hook+JS实现框选拖拽

需求描述

1. 分组内的小方框可以直接点击拖动，可以Ctrl+Click点选多个，也可以鼠标拖动框选。

2. 点击选中的小方框后, 在分组之间拖动改变状态

实现效果

分析

基于组件化的思想，每一个分组框都是一个独立的组件，该需求的难点主要在于状态的分析，选中的box, 拖动结点，框选样式，新旧分组等等，在合适的时机设置和恢复状态、父子组件共享状态，合理分配父子组件监听鼠标动作的方式，以及一些dom判断的工具函数。

实现

分组组件DndContainer：

状态：框选框的样式：selectBoxStyle

需要监听鼠标的mousedown, mousemove, mouseup，click事件

mousedown： 记录鼠标开始事件startEvent，鼠标在box内落下，设置activeBox, 在box外，清除activeBox

mousemove:   判断mouse event从active box开始，显示移动节点，否则设置框选样式（top,left, width, height）

mouseup: 判断框选框和box矩形相交，更新activeBox； 恢复startEvent, selectBoxStyle为空，movingNodeVisible为false

click: in box,判断ctrlDown, 更新activeBox

分组组件实现

外层

状态：activeBox - 选中的box；startEvent - 鼠标开始down的位置，便于处理框选框的样式； movingXY - 鼠标移动的坐标， 框选框的样式和移动结点都需要；ctrlDown - Ctrl键是否按下； movingNodeVisible - 拖动结点是否显示

外层：鼠标会在分组之间移动，需要监听mousemove， 设置movingXY; moseup时，隐藏移动结点，清除startEvent, 找到新的分组后，更新box和所属分组数据。监听键盘事件，更新ctrlDown状态

外层父组件实现

工具函数

框选涉及到两个div的相交判断，以及监听鼠标动作拖拽，应用到了比较多的坐标和位置判断函数，这里不一一赘述

总结

实现的过程还是走了比较多的弯路，也学到了很多：

1. 组件内监听该div内部处理的事件，阻止触发默认事件，可以和外部event事件隔离

2. 外层监听有event交叉的事件, 比如mousemove.  组件内监听mouseup事件有交叉时无法捕捉到，所以提到父组件监听，更新分组

3. 实际的例子中，还有一个弹框也使用了DndContainer组件，会跟dom内分组的active样式有交叉，所以进行动态的设置样式

4. 框选时，鼠标移出分组触发mouseup, 需要重置selectBoxStyle, 出现了父组件需要操作子组件内部状态的问题，打算用useImperativeHandle解决，后来发现可以用分组的mouseleave事件。

5. 刚开始时设计了新旧组件的状态，发现拖动频繁的时候，有时候拿不到正确的新旧分组，通过传递parentId和设置每个分组的id，从activeBox中获取旧的分组，新分组在mouseup时动态判断

6. 更新activeBoxes的时候, 需要隔离不同的分组，不在同一个分组时需要重新设置。巧妙地根据第一个activeBox的分组id判断是追加还是重新设置

当然，分析过程也不是一蹴而就的，在不断的实践中才慢慢明晰