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

(转自https://segmentfault.com/a/1190000019581578）

需求

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

实现

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

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

PC端

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

鼠标拖拽mousemove和移动端touchmove问题相关推荐

html鼠标可拖动窗体,JS实现简单移动端鼠标拖拽
本文实例为大家分享了JS实现移动端鼠标拖拽的具体代码,供大家参考,具体内容如下 Document #div { width: 100%; height: 200px; background: rosy ...
html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
java鼠标左键按下后拖动实现多选_鼠标拖拽多选功能
鼠标拖拽多选功能 *{ box-sizing:border-box; } ul{ width:500px; height:auto; margin:0; padding:20px; font-size ...
WPF 在image控件用鼠标拖拽出矩形
今天有小伙伴问我一个问题,在image控件用鼠标拖拽出矩形,本文告诉大家如何使用鼠标画出矩形做出来的效果先请大家看一下最简单的方法是在 Down 的时候记录按下的点,在移动的时候重新计算所在的宽 ...
13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）
目录一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动) 二:取消拖拽文字的行为 1.没取消前: 2.取消后: 三:鼠标拖拽案例优化: 如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻 ...
鼠标拖拽---自定义布局（电影院）
鼠标拖拽点击-电影院自定义布局标签鼠标拖拽.自定义布局效果自定义布局-电影院目的疫情期间,电影院都是隔空而坐,想用html.css.js.jq做个简单的自定义布局. 介绍自定义布局中有银 ...
html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...

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

(转自https://segmentfault.com/a/1190000019581578）

需求

实现

鼠标拖拽mousemove和移动端touchmove问题相关推荐

最新文章

热门文章