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

Ashin 发布于2019-08-23 18:17 / 2413人阅读

摘要：需求移动实现手指触摸移动物体端实现鼠标拖拽物体实现移动端通过和事件实现时记录手指按下的位置为为了方便描述移动时中获取移动过程中的位置为计算此次移动的距离正或者负，将移动物体的绝对位置更新原始位置加上移动距离，更新的值。进入下一次移动事件

需求

移动实现手指触摸移动物体

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的值。进入下一次移动事件

云服务器 GPU云服务器 html禁止鼠标拖拽鼠标移动移动鼠标随鼠标移动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104989.html

前端基础进阶（十）：面向对象实战之封装拖拽对象

摘要：前面几篇文章，我跟大家分享了的一些基础知识，这篇文章，将会进入第一个实战环节利用前面几章的所涉及到的知识，封装一个拖拽对象。不封装对象直接实现利用原生封装拖拽对象通过扩展来实现拖拽对象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面几篇文章，我跟大家分享了JavaScript的一些基础知识，这篇文章，...

Eidesen 2019-08-21 18:31 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

Nosee 2019-08-19 18:36 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

microelec 2019-08-01 15:24 评论0 收藏0