上一章节我们说到了拖拽让图片相互之间交换位置，相对来说是一个比较综合的示例，涉及到了矩形的碰撞检测，勾股定理计算两点间的距离以及最小距离的获取。
本章目标：
- jquery插件的扩展原理
- 滑动事件swipe的介绍和封装
在移动端，我们经常会通过手指左滑，右滑，上滑，下滑去触发一些操作，这种手指滑动操作我们称之为swipe相关的事件。
先来看下今天要实现的效果吧！
一个简单的滑动事件的示例
然后不巧的是，这些事件并不是原生就提供给我们使用的。而我们能够使用之，是因为有人造好了轮子。
那么接下来我们也一起去造一下这个轮子吧，看看它和我们的拖拽有着怎样千丝万缕的联系吧~
本次swipe相关事件是基于 伟大的jquery来实现的。所以我们先来了解一下jquery的插件扩展原理吧
jquery插件的扩展原理
熟悉jqeuery的特性的都知道，它是基于面向对象，插件的扩展内部原理其实就是在类为原型上添加自定义的方法。
$.fn.pluginName = function(){ ... do something}what?不是插件是在原型上扩展的吗？？？
OK，为了验证我的做法，老规矩，找源码去。
作者在类下直接挂载了一个fn属性，这个属性和jQuery的原型对象相等，我们知道在jquery中，$ === jQuery的。所以，我们可以$.fn.pluginName = function(){}进行扩展
滑动事件swipe的介绍和封装
分析一下，滑动的动作，手指按下，手指移动，手指抬起，实质是三个事件的合体，刚好和我们的拖拽三大事件不谋而合。
问题1：如何定义滑动的方向？
假如圆心为我们的手指的起始点，那么手指抬起的时候位置落在的区域如图所示，我们就能轻松判断出用户的手指的滑动方向。
问题2：触发最终滑动事件的条件是什么？比如向上滑动的判断条件是什么？
- 手指的终点在的pageY要大于手指按下时的pageY
- 手指的y方向的运动距离要大于X轴的运动距离。
- 从手指按下到抬起的时间差在某一个范围内。
接下来我们用代码实现一下
我们定义扩展的插件名为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来调用。
