物料拖拽的基本原理

物料拖拽的基本过程是

1. 鼠标按下（mouse down）：用户点击并按下鼠标时，我们开始记录鼠标的位置，并准备拖拽操作。
2. 鼠标移动（mouse move）：鼠标移动时，我们更新物料信息的位置，动态改变物料的位置
3. 鼠标释放（mouseup）：当鼠标松开时，物料被放置到新的位置。

整个过程中，我们需要额外处理一些细节：

• 拖拽指示线：显示物料拖拽过程中可能放置的目标元素。
• 碰撞检测：检测拖拽物料是否与页面上的其他元素发生重叠，并显示合适的反馈。

性能优化

1. 虚拟区域优化：
   • 使用 DocumentFragment 一次性插入多个节点，减少重绘。
   • 提前缓存节点信息，避免重复查询 DOM
   • 精确计算虚拟区域大小，减少内存占用
2. 滚动逻辑优化：
   • 动态调整滚动逻辑，只在拖拽边界时触发滚动。
   • 使用 requestAnimationFrame 优化滚动触发逻辑。
3. 事件监听优化：
   • 精确绑定事件目标，避免不必要的全局监听
   • 使用防抖技术优化高频事件，例如拖拽的 mousemove
   • 避免不必要的重绘操作，例如动态调整指示器