QQ 风格分组好友列表
一个两级有序结构：分组 (group) 有序、分组内好友也有序。所有交互最终都归约成对 groups[] 与 group.memberIds[] 两个数组的 splice。拖拽用 Pointer Events 自绘（移动端可用），支持分组重排、好友跨分组移动、拖到边缘自动滚动、悬停折叠分组自动展开；右键好友 / 分组弹出操作菜单。
试一试： 拖动好友行到别的分组（拖到折叠的分组头上停顿一下会自动展开）；拖动分组头给分组重新排序；右键好友或分组弹出菜单（移动到 / 重命名 / 删除）。列表很长时拖到上下边缘会自动滚动。
数据模型： 好友信息存全局 friendsById，分组只持有 memberIds 引用。移动好友 = 从源分组 memberIds 删、往目标 memberIds 插，数据本体不搬动；在线 / 总数都从 memberIds 实时算。
相关链接
- Pointer events developer.mozilla.org 统一鼠标 / 触摸 / 触控笔的指针事件模型,自绘拖拽的基础。
- Element.setPointerCapture() developer.mozilla.org 把后续指针事件捕获到指定元素,拖拽中不丢失目标。
- Array.prototype.splice() developer.mozilla.org 原地删除 / 插入元素:本页两级重排的唯一底层操作。
- Document.elementFromPoint() developer.mozilla.org 按坐标命中元素,拖拽时判定落点在哪个分组 / 好友之前。