jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...

欢迎来到我的JS拖拽专题系列文章，本章节将是拖拽系列的最后一篇。感谢大家的支持^_^

上一章节我们说到了拖拽让图片相互之间交换位置，相对来说是一个比较综合的示例，涉及到了矩形的碰撞检测，勾股定理计算两点间的距离以及最小距离的获取。

本章目标：

1. jquery插件的扩展原理
2. 滑动事件swipe的介绍和封装

在移动端，我们经常会通过手指左滑，右滑，上滑，下滑去触发一些操作，这种手指滑动操作我们称之为swipe相关的事件。

先来看下今天要实现的效果吧！

一个简单的滑动事件的示例

然后不巧的是，这些事件并不是原生就提供给我们使用的。而我们能够使用之，是因为有人造好了轮子。

那么接下来我们也一起去造一下这个轮子吧，看看它和我们的拖拽有着怎样千丝万缕的联系吧~

本次swipe相关事件是基于 伟大的jquery来实现的。所以我们先来了解一下jquery的插件扩展原理吧

jquery插件的扩展原理

熟悉jqeuery的特性的都知道，它是基于面向对象，插件的扩展内部原理其实就是在类为原型上添加自定义的方法。

$.fn.pluginName = function(){  ... do something}

what?不是插件是在原型上扩展的吗？？？

OK，为了验证我的做法，老规矩，找源码去。

作者在类下直接挂载了一个fn属性，这个属性和jQuery的原型对象相等，我们知道在jquery中，$ === jQuery的。所以，我们可以$.fn.pluginName = function(){}进行扩展

滑动事件swipe的介绍和封装

分析一下，滑动的动作，手指按下，手指移动，手指抬起，实质是三个事件的合体，刚好和我们的拖拽三大事件不谋而合。

问题1：如何定义滑动的方向？

假如圆心为我们的手指的起始点，那么手指抬起的时候位置落在的区域如图所示，我们就能轻松判断出用户的手指的滑动方向。

问题2：触发最终滑动事件的条件是什么？比如向上滑动的判断条件是什么？

1. 手指的终点在的pageY要大于手指按下时的pageY
2. 手指的y方向的运动距离要大于X轴的运动距离。
3. 从手指按下到抬起的时间差在某一个范围内。

接下来我们用代码实现一下

我们定义扩展的插件名为swipe,于是就有了：

$.fn.swipe = function(type,fn){}

其中type为我们要滑动的方向，比如：up, down ,left,top

依据上面的分析：在手指按下的时候，记录手指的起始X和Y的坐标和起始时间

在手指抬起的时候，再次获取当前的X，Y和时间

再分别计算出差值。

条件判断

执行我们的fn函数

完整的代码请私信我

这是我们封装向上滑动的插件内部实现。同理，其它的方向的滑动只需要做细小的变动即可。这里不再赘述。

说明：插件的扩展还有一些默认的参数的配置，这些在本章节中不是主要，就不再细分下去了。有兴趣的大家可以阅读其它的swipe插件的封装。比我这边要复杂一些，但是原理和我分享的差不了。建议各位项目中还是用成熟的插件哦。

我这里只是想告诉大家这个轮子大概是怎么造出来的

插件的调用

var ul = $('#container ul');var iNow = 0;ul.swipe('up',()=>{console.log('up');iNow++;iNow = Math.min(5,iNow)ul.css({transform:'translateY('+-iNow * 100 +'vh)'});}).swipe('down',e=>{iNow--;iNow = Math.max(0,iNow)ul.css({transform:'translateY('+-iNow * 100 +'vh)'});})

这里的swipe就是我们自己扩展的插件的方法。up是我们定义滑动的方向fn是滑动后的回调方法。

为什么我们定义的插件后，可以直接用ul.swipe方法呢？这个我们在文章的最前端已经说到，jquery 是基于面向对象的，var ul = $('#container ul');就相当于new jQuery()，也就是说ul是jQuery类的一个实例，而我们的插件是基于类的原型扩展出来的方法。所以我们可以直接通过ul.swipe来调用。

---

这里是【畅哥聊技术】JS拖拽专题系列技术文章的最后一个章节，在 web中，有关于拖拽的变形应用还有很多，但是万变不离其踪，掌握原理，其它都是浮云。我的系列文章只是记录了我在工作中经常用到的案例。希望从中能帮助到大家。

最后感谢各位的支持，下一个系列专题分享还在准备中...

敬请期待！

(全文完)