元素吸附对齐

实现原理

在拖拽过程中，检测元素与其他元素的对齐关系。当接近对齐位置时（如 10px 以内）， 自动吸附到对齐线。

function checkSnap(element, target) {
  const snapThreshold = 10;

  const elemRect = element.getBoundingClientRect();
  const targetRect = target.getBoundingClientRect();

  // 检查左边缘对齐
  if (Math.abs(elemRect.left - targetRect.left) < snapThreshold) {
    // 吸附到左边缘
    return { snap: true, value: targetRect.left };
  }

  // 检查右边缘对齐
  if (Math.abs(elemRect.right - targetRect.right) < snapThreshold) {
    return { snap: true, value: targetRect.right - elemRect.width };
  }

  return { snap: false };
}

示例：网格吸附

拖拽元素会自动吸附到 50px 网格

总结

• 定义吸附阈值（如 10px）
• 在拖拽过程中持续检测对齐关系
• 显示辅助线提示对齐位置
• 自动调整元素位置到对齐点
• 提升用户体验和精确度