前端托牵效果

Posted 2020-06-23 mrdoor

上文说到，想将移动端的拖拽说一说，那现在趁有时间，就将这个福利文带来了，哈哈！

在我还不知道怎么做移动端的手势操作的时候，我觉得这TM实在是太难了，这是多么高深的学问啊，手势操作耶，上滑下滑左滑右滑的，手机怎么知道我是怎么滑的，我要怎么告诉手机，我用手滑了一下，于是我就默默的找资料看看，

到底是什么样的原理可以实现这一点，于是，我找到了移动端手势操作原生事件：

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表:

touches:     //当前屏幕上所有手指的列表

targetTouches:      //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches:     //涉及当前事件的手指的列表，尽量使用这个代替touches

 

看到他们，我简直心生喜悦啊，简直了，这不就是我苦苦寻觅的东西吗？手机再也不用担心我的手指在干什么了！

有了上面的这些原始事件，我们能做什么事情呢？

1、通过touches，我们可以知道屏幕上有几根手指，那就可以自定义一根手指做什么，两根手指做什么，三根手指又做什么；

2、我们可以通过手指在屏幕接触的时间，来自定义轻触，模拟点击，长按，双击等等效果，当然这就比较高级了；

3、可以自定义上滑下滑左滑右滑等手势效果；

4、可以模拟滚动条效果；

5、可以实现手指拖拽效果；

。。。。。。

等等，可以实现很多你想要实现的效果，只要你敢想，当然今天要讲解的并不是移动端手势操作这么大的话题，今天就从手指拖拽效果这一个小点开始，以后慢慢介绍移动端的那些事。

 

回归正题，上回我们将了一下PC端的拖拽效果，不熟悉的同学可以看这里查看，移动端的拖拽思想跟pc端很像，区别只是写法不一样，具体的实现原理我就不说了，不理解的请看PC端的介绍，PC端没有用到绑定事件，其实也是可以用绑定事件来绑定的，

移动端需要用绑定事件来触发，具体代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

/*     参数说明：     元素绝对定位，父级相对定位，如果父级为window，则可以不用     传一个参数，表示父级为window，物体相对于window范围拖动     传2个参数，则父级为第二个参数，物体相对于父级范围拖动     参数为id值 */ function drag(obj,parentNode){     var obj = document.getElementById(obj);     if(arguments.length == 1){         var parentNode = window.self;           var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;        }else{         var parentNode = document.getElementById(parentNode);         var pWidth = parentNode.clientWidth,pHeight = parentNode.clientHeight;     }     obj.addEventListener(\'touchstart\',function(event){         //当只有一个手指时              .         if(event.touches.length == 1){             //禁止浏览器默认事             event.preventDefault();         };         var touch = event.targetTouches[0];         var disX = touch.clientX - obj.offsetLeft,disY = touch.clientY - obj.offsetTop;         var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;           obj.addEventListener(\'touchmove\',function(event){             var touch = event.targetTouches[0];             obj.style.left = touch.clientX - disX  + \'px\';             obj.style.top = touch.clientY - disY + \'px\';             //左侧             if(obj.offsetLeft <=0){                 obj.style.left = 0;             };             //右侧             if(obj.offsetLeft >= pWidth -oWidth){                 obj.style.left =  pWidth - oWidth + \'px\';               };             //上面             if(obj.offsetTop <= 0){                 obj.style.top = 0;              };             //下面             if(obj.offsetTop >= pHeight - oHeight){                 obj.style.top =  pHeight - oHeight + \'px\';              };                          });         obj.addEventListener(\'touchend\',function(event){             obj.removeEventListener(\'touchmove\');             obj.removeEventListener(\'touchend\');         })     }); }

这里我也设置了2个参数，如果只填一个参数，表示相对父级为window，物体在window内拖动，如果填2个参数，第一个参数为拖拽对象，第二个参数为相对父级，跟pc差不多，有点不同的是，pc鼠标移动和弹起时，我们作用的对象是document，是为什么防止鼠标拖动物体外面所带来的bug，现在是作用于obj对象上，这是为什么呢？

原因是在移动端上，如果有一个拖拽对象相对于window，一个拖拽对象相对于自己的相对父级，现在我们是绑定事件，如果拖动后面这个拖拽对象，因为2个都是执行的，我们把拖拽事件绑定到window，就会一起触发前面的拖拽，如果是绑定在拖拽物体上就可以避免

事件的污染问题，因为都在自身嘛！

我相信实现拖拽的方法不只这个，还有很多的方法可以实现，我也相信我写的这个代码并不是最优的，只能说可以用用，所以，如果哪位大神有更好的实现方法，或者是代码有什么错误的地方，万望指正！不胜感谢！

才疏学浅，先就到这里!后续有时间，我们在一起聊一聊移动端前端的那些事！哈哈~