触摸屏下touchmove事件触发拖拽时位置偏移问题

问题原因 #

你当前实现出现拖拽偏移的核心原因是没有计算触摸点与拖拽元素左上角的相对偏移：直接将触摸点的视口坐标赋值给元素的left/top属性，会强制元素左上角对齐触摸点，而用户触发拖拽时通常点击的是元素的非左上角区域，自然就会出现明显的位置跳变偏移。

修复方案 #

你需要分两步调整实现逻辑：

1. 在touchstart事件触发时，记录触摸点相对于拖拽元素左上角的偏移值
2. 在touchmove事件中，用当前触摸点坐标减去预先记录的偏移值，再赋值给元素的位置属性

完整示例代码

// 存储触摸点相对元素的偏移量
let touchOffsetX = 0
let touchOffsetY = 0

// 绑定touchstart事件
dragElement.addEventListener('touchstart', e => {
  const currentTouch = e.touches[0]
  // 计算并存储偏移量
  touchOffsetX = currentTouch.clientX - e.target.offsetLeft
  touchOffsetY = currentTouch.clientY - e.target.offsetTop
  // 阻止默认行为，避免触发页面滚动、缩放等干扰
  e.preventDefault()
})

// 绑定touchmove事件
dragElement.addEventListener('touchmove', e => {
  const _touch = e.touches[0]
  // 减去偏移量得到正确的元素左上角坐标
  const _left = _touch.clientX - touchOffsetX
  const _top = _touch.clientY - touchOffsetY
  _touch.target.style.left = _left + 'px'
  _touch.target.style.top = _top + 'px'
  e.preventDefault()
})

注意事项 #

• 确保拖拽元素的position属性设置为absolute或fixed，否则left/top属性不会生效
• 如果拖拽元素的父级设置了transform属性，需要额外调整坐标计算逻辑，避免父级定位规则影响元素位置计算
• 不同设备触摸事件的默认行为存在差异，添加e.preventDefault()可以避免页面滚动、文本选中这类默认行为干扰拖拽效果

内容的提问来源于stack exchange，提问作者Rehan Khan