单点拖拽和多点多拽

Posted 逗比煎饼侠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单点拖拽和多点多拽相关的知识,希望对你有一定的参考价值。

demo见github:https://github.com/fei1314/drag/tree/master

一、拖拽原理
  手指所处的位置到一个div顶部的距离L一直不变。
二、单点拖拽
  1.touchstart:单指按下
  2.touchmove:单指移动
  3.touchend:单指抬起

  a.在touchstart事件中,利用拖拽原理,先保存手指到div顶部的距离。X轴方向上,手指的坐标ev.targetTouches[0].pageX,div到浏览器左边的距离offsetLeft。两者距离之差保持不变。就是let disX=ev.targetTouches[0].pageX-oBox.offsetLeft;
  同理,Y轴方向上也是,即let disY=ev.targetTouches[0].pageY-oBox.offsetTop;
  b.如果出现滚动条,在拖拽div的时候,滚动条也会随之滚动,所以要阻止默认事件。一般我们会添加ev.preventDefault();或者ev.cancelBubble=true; 在移动端需要两个都添加上
  c.在手指移动过程中,需要touchmove事件,移动过程中手指的坐标是ev.targetTouches[0].pageX,div到浏览器的X轴距离就是ev.targetTouches[0].pageX减去disX。同理,Y轴方向也是如此。
  d.在手指抬起的时候,触发touchend事件,此时要把touchmove和touchend事件清除掉。用removeEventListener事件
三多点拖拽
原理和单点拖拽基本一样。不同的是在手指抬起的时候,因为是多指,不知道是抬起的是哪个。
此时有ev.targetTouches[0].identifier;指的是id。先保存起来。
在touchend事件中,ev.changedTouches表示已经抬起的手指,我们先设置一个标识found=false表示手指没有抬起,再判断ev.changedTouches中的identifier和之前保存的identifier一样,则表示这个identifier抬起来了。此时就清除touchmove和touchend事件。

 

以上是关于单点拖拽和多点多拽的主要内容,如果未能解决你的问题,请参考以下文章

js实现拖拽和放大 图片

设置zedgraph鼠标拖拽和局部放大属性 转

svg拖拽和缩放

d3.js svg 可以同时加拖拽和缩放事件吗

jQuery 拖拽和绘制

拖拽和自定义播放器