共计 380 个字符,预计需要花费 1 分钟才能阅读完成。
需求
- 移动实现手指触摸移动物体
- 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 的值。进入下一次移动事件
正文完
发表至: javascript
2019-06-25