单点拖拽和多点多拽

Posted 2020-10-16 逗比煎饼侠

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事件。