本文详解在 Canvas + SVG 棋类游戏中，使用 mousemove 实现棋子始终以鼠标光标为中心拖拽的完整方案，重点解决因页面滚动、缩放或容器偏移导致的定位偏移问题，并提供稳定、跨浏览器的坐标计算方法。
本文详解在 Canvas + SVG 棋类游戏中，使用 `mousemove` 实现棋子始终以鼠标光标为中心拖拽的完整方案，重点解决因页面滚动、缩放或容器偏移导致的定位偏移问题，并提供稳定、跨浏览器的坐标计算方法。
在基于 HTML
根本原因在于：event.clientX 和 event.clientY 返回的是相对于视口（viewport）左上角的坐标，而 element.style.left/top 是相对于其 最近的定位祖先（offsetParent） 计算的。二者坐标系不一致，且未扣除滚动偏移（scrollX/scrollY）和容器自身偏移（offsetLeft/offsetTop），导致计算失准。
✅ 正确做法是统一坐标系：将鼠标视口坐标，转换为相对于目标元素 offsetParent 的像素偏移量。
以下是经过验证的稳健实现（适配 Chrome/Firefox/Safari）：
movePiece = function(event) {
const piece = game.selectedPiece;
const parent = piece.offsetParent; // 获取最近定位祖先（如 #gameBox）
// 计算滚动补偿（兼容旧版 IE）
const scrollX = window.scrollX || window.pageXOffset;
const scrollY = window.scrollY || window.pageYOffset;
// 棋子半宽高（实现光标居中）
const offsetX = piece.offsetWidth / 2;
const offsetY = piece.offsetHeight / 2;
// 关键：clientX/Y → 减去父容器在视口中的位置 → 加上滚动量 → 减去半尺寸
const left = event.clientX
- parent.getBoundingClientRect().left
+ scrollX
- offsetX;
const top = event.clientY
- parent.getBoundingClientRect().top
+ scrollY
- offsetY;
piece.style.left = `${Math.round(left)}px`;
piece.style.top = `${Math.round(top)}px`;
};
? 为什么推荐 getBoundingClientRect() 而非 offsetParent.offsetLeft/Top？
offsetParent.offsetLeft/Top 仅返回该父元素自身相对于其 offsetParent 的偏移，不包含 margin、transform 或 border 影响；而 getBoundingClientRect() 返回的是元素在当前视口中的绝对矩形位置（含所有 CSS 布局影响），精度更高、更可靠。
⚠️ 注意事项：
- 确保拖拽容器（如 #gameBox）设置了 position: relative（你已正确设置），否则 offsetParent 可能退化为 ，引入额外误差；
- 避免在拖拽过程中动态修改 #gameBox 的尺寸或定位属性，否则需重新缓存 getBoundingClientRect()；
- 若需极致性能（高频 mousemove），可将 parent.getBoundingClientRect() 提前缓存至 game.dragParentRect，并在 mousedown 时更新；
- 不建议依赖 event.offsetX/offsetY：它们表示相对于目标事件元素（如 canvas）的坐标，而你的拖拽目标是
，且该属性在 SVG 元素上行为不一致，并非本场景解法。
? 总结：精准拖拽 = clientX/Y → 视口坐标
→ 减去 parent.getBoundingClientRect() 得到父内坐标
→ 加上 scrollX/Y 补偿滚动
→ 减去半尺寸实现光标居中
此逻辑完全脱离窗口缩放、滚动条状态与 CSS 布局干扰，真正实现“所见即所得”的拖拽体验。
