一切福田,不離方寸,從心而覓,感無不通。

移动端:div在手机页面上随意拖动/拖拽

为了兼容PC和移动端,想出了以下办法:

拖动时候用到的三个事件: mousedown 、 mousemove 、 mouseup 在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是: touchstart 、 touchmove 、 touchend 事件。还有一点要注意的是在PC端获取当前鼠标的坐标是: event.clientX 和 event.clientY ,在移动端获取坐标位置则是: event.touches[0].clientX 和 event.touches[0].clientY 。下面就来说说怎么实现这个效果吧,先看一下效果:

PC端 :

移动端 :

先来分析一个拖动的流程,以PC端为例,首先是鼠标按下( mousedown 事件),然后移动( mousemove 事件),最后释放鼠标( mouseup 事件),首先要设置一个变量记录鼠标是否按下,在鼠标按下的时候,我们做一个标记,然后需要记录一下鼠标当前的坐标,还有这个div当前的偏移量,当鼠标开始移动的时候,记录下鼠标当前的坐标,用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时div的偏移量就是现在div距离父辈元素的距离,当鼠标释放的时候将标记改为鼠标已经释放。下面来看一下代码:

然后在将事件加入到这个div中即可,下面再来看一个在移动端需要做些什么,首先是事件不同,只需要在添加移动端的 touchatart 、 touchmove 、 touchend 就可以了,还有一个不同的时移动端获取坐标是 event.touches[0].clientX 和 event.touches[0].clientY ,这也很简单,只要加上判断就可以了,如果是PC端就使用event,如果是移动端就使用 event.touches :

还有一点要注意,在移动端拖动div的时候移动端的页面会自动产生滑动效果,所以还需要在 touchmove 的是给页面添加一个阻止默认事件的函数。

下面是整个代码,可以在Chrome下模拟移动端测试,点击这里查看

 

from:https://www.cnblogs.com/joyco773/p/6519668.html