拖拽流式布局中应通过事件委托和拖拽生命周期控制 mousemove 监听：仅在 mousedown 时绑定 document 的 mousemove，mouseup 时解绑；用 requestanimationframe 节流采样坐标；同步记录 scroll 偏移与容器 rect；兼容 touchmove 并避免 pointer-events 干扰。
在拖拽流式布局中用 addEventListener 实时追踪鼠标移动轨迹，关键不是给每个元素单独监听 mousemove，而是利用事件委托 + 拖拽生命周期控制，避免性能浪费和轨迹错乱。
只在拖拽过程中监听 mousemove
全局监听 mousemove 会持续触发，造成无谓计算。正确做法是：仅在用户真正拖拽某个元素时才启用监听，并在拖拽结束时移除。
- 在
mousedown（或dragstart）时记录被拖元素、初始位置，并调用document.addEventListener('mousemove', handleMove) - 在
mouseup或mouseleave或dragend时立刻调用document.removeEventListener('mousemove', handleMove) - 这样轨迹数据只在拖拽有效期内采集，且绑定在 document 上，能跨流式容器边界稳定捕获坐标
用 requestAnimationFrame 节流轨迹采集
原生 mousemove 触发频率高（每毫秒多次），直接存点会导致数组爆炸。需节流并平滑采样：
- 在
handleMove中不立即记录坐标，而是设一个let pending = true标志 - 调用
requestAnimationFrame(() => { if (pending) recordPoint(e.clientX, e.clientY); pending = false; }) - 这样每帧最多记一次点，轨迹既连续又轻量，适合后续做路径拟合或预览
结合流式布局动态计算相对位置
流式布局（如 display: flex; flex-wrap: wrap 或 CSS Grid）下，元素位置随窗口缩放/内容增减实时变化。单纯存屏幕坐标（clientX/clientY）无法还原拖拽路径语义。
- 记录点时，同步保存当前滚动偏移
window.scrollX / scrollY和容器getBoundingClientRect() - 若需回放轨迹，用
elementFromPoint(x, y)或区域判断（如计算鼠标是否落在某 item 的 bounding rect 内）来映射到具体流式子项 - 对高度自适应的卡片布局，建议额外缓存拖拽开始时各 item 的
offsetTop + offsetHeight快照，用于后续比对
避免 pointer-events 干扰与移动端兼容
流式容器内若有遮罩层、图标按钮或 pointer-events: none 元素，可能中断 mousemove 流。同时，移动端需兼容 touchmove：
- 监听时统一用
document.addEventListener('mousemove', ...)和document.addEventListener('touchmove', ...)，并在 handler 中用e.touches?.[0] || e取坐标 - 确保拖拽目标元素没有
pointer-events: none，其父容器也别意外拦截事件（比如overflow: hidden且未设position: relative） - 可加一句
e.preventDefault()在touchmove中防止页面滚动干扰轨迹
