Canvas拖拽底层需坐标转换、状态管理与事件绑定：mousedown时用getBoundingClientRect换算点击坐标并hit-test，mousemove中更新位置，mouseup时重置状态；Phaser需setInteractive()和setDraggable(true)；移动端须处理touch事件并preventDefault。
Canvas 中用 mousedown/mousemove 实现拖拽的底层逻辑
HTML5 游戏里没 DOM，拖拽不是靠 dragstart 那套事件，得自己算坐标、判点击、绑移动。核心是三件事：鼠标按下时记录是否击中物体、按下后持续监听移动、松开时清状态。
常见错误是直接监听 canvas 的 mousemove 却没做坐标转换——浏览器事件的 clientX/clientY 是相对于视口的，而 Canvas 坐标系原点在左上角，且可能被缩放或偏移。必须用 getBoundingClientRect() 手动换算：
const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) / canvas.width * canvas.clientWidth; const y = (e.clientY - rect.top) / canvas.height * canvas.clientHeight;
否则拖拽会“漂移”，尤其在高 DPI 屏或页面有 margin/padding 时更明显。
- 只在
mousedown时做一次 hit-test（比如点是否在矩形/圆形内），别每帧都测 - 拖拽中不要反复调用
requestAnimationFrame更新物体位置，直接赋值obj.x/obj.y即可，渲染循环里统一 draw - 记得在
mouseup或mouseleave时重置拖拽状态变量（如isDragging = false），否则鼠标移出 canvas 后松手，物体还会跟着跑
Phaser 3 里用 setInteractive() 开启拖拽的注意事项
Phaser 3 封装了底层逻辑，但默认不启用拖拽，得手动配。关键不是加事件监听，而是先让对象“可交互”，再指定拖拽行为。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是只调 sprite.setInteractive() 就以为能拖了——不行。必须显式启用拖拽：sprite.setDraggable(true)，且确保该 sprite 在场景中已添加（this.add.existing(sprite)），否则拖拽事件不会触发。
-
setDraggable(true)后，drag事件才生效；dragstart和dragend可选，但drag必须监听才能实时更新位置 - 如果 sprite 有缩放（
scaleX/scaleY）或旋转（angle），drag事件里的pointer.x/pointer.y仍是世界坐标，直接赋给sprite.x/sprite.y即可，引擎内部已处理变换 - 多个可拖拽对象叠加时，z-index 由添加顺序决定；想让某个总在最上层，拖拽开始时调
sprite.setDepth(Number.MAX_SAFE_INTEGER)
拖拽释放后吸附到网格或目标区域的判断时机
释放瞬间（dragend 或 mouseup）才是做吸附判断的唯一时机。提前算、延迟算、或在 drag 过程中实时吸附，都会导致视觉跳变或逻辑错乱。
典型场景是拼图、塔防放置、格子地图单位部署。吸附不是“吸过去”，而是“松手那一刻，把坐标 snap 到最近格子中心”。
- 计算公式通常是：
Math.round(x / gridSize) * gridSize，注意gridSize要和渲染单位一致（比如 canvas 像素 or world units） - 如果目标区域是不规则多边形（比如一个基地轮廓），别用像素碰撞，改用
Phaser.Geom.Polygon.Contains(polygon, x, y)判断释放点是否在内 - 吸附失败时，建议把物体弹回原始位置（需提前缓存
startX/startY），而不是卡在半路——用户需要明确反馈
移动端 touch 事件适配的关键差异
Canvas 拖拽在手机上不能只监听 mousedown，得同时处理 touchstart/touchmove/touchend，而且 touch 事件的坐标在 e.touches[0] 里，不是 e.clientX。
更麻烦的是，移动端默认有延迟（300ms 点击延迟）、双指缩放、滚动穿透等问题。不阻止默认行为，手指一划页面就滚走了，拖拽直接中断。
- 在
touchstart里立刻调e.preventDefault()，并绑定touchmove和touchend - touch 坐标换算方式和 mouse 一样，但要用
e.touches[0].clientX，不是e.changedTouches[0].clientX（后者只在 touchend 时可靠） - Phaser 3 默认支持 touch，但若自定义 Canvas 渲染，必须手动禁用
canvas.style.touchAction = 'none'，否则 iOS Safari 会拦截 touchmove
拖拽看似简单，真正难的是坐标系统的一致性、事件生命周期的完整性、以及跨平台输入抽象的准确性。少一个 preventDefault，少一次坐标归一化，或者松手时没清状态，整个交互就断掉了。
