歡迎來到我的JS拖拽專題系列文章，本章節將是拖拽系列的最后一篇。感謝大家的支持^_^

上一章節我們說到了拖拽讓圖片相互之間交換位置，相對來說是一個比較綜合的示例，涉及到了矩形的碰撞檢測，勾股定理計算兩點間的距離以及最小距離的獲取。

本章目標：

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來調用。

---

這里是【暢哥聊技術】JS拖拽專題系列技術文章的最后一個章節，在 web中，有關于拖拽的變形應用還有很多，但是萬變不離其蹤，掌握原理，其它都是浮云。我的系列文章只是記錄了我在工作中經常用到的案例。希望從中能幫助到大家。

最后感謝各位的支持，下一個系列專題分享還在準備中...

敬請期待！

(全文完)

總結

以上是生活随笔為你收集整理的jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。