#思考# 鼠标拖拽mousemove和移动端touchmove问题

2024年3月25日 273次阅读 来源: 纤细的一帆风顺

需求

  • 移动实现手指触摸移动物体
  • PC端实现鼠标拖拽物体

实现

  • 移动端 通过touchstart和touchmove事件实现

1、touchstart时记录手指按下的位置 x=event.touch[0].pageX, y=event.touch[0].pageY,为A(为了方便描述)
2、移动时touchmove中获取移动过程中的位置,为B
3、计算此次移动的距离C（正或者负），
4、将移动物体的绝对位置更新：原始位置加上移动距离，
5、更新A的值。进入下一次移动事件

  • 管理端

1、mousedown时记录手指按下的位置 x=event.clientX, y=event.clientY,为A(为了方便描述)
2、移动时touchmove中获取移动过程中的位置,为B
3、计算此次移动的距离C（正或者负），
4、将移动物体的绝对位置更新：原始位置加上移动距离，
5、更新A的值。进入下一次移动事件

    原文作者：纤细的一帆风顺
    原文地址: https://segmentfault.com/a/1190000019581578
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞