我怎麼知道用戶刷過了哪個方向？

Question

我使用這個名爲Dragend https://github.com/Stereobit/dragend的插件來實現觸摸功能。我認爲這使用了一些Hammertime的代碼，如果你知道這個插件比Dragend多。

有像onDrag或onSwipeStart和onSwipeEnd這樣的選項來確定在這些事件上會發生什麼。

但是我只是不知道如何看到我剛剛刷過的方向。即使你不知道這個插件，我希望有人能幫助我。也許用一些JQuery來檢查刷/刷之後所做的HTML/CSS更改？

Answer 1

看着插件http://stereobit.github.io/dragend/demos/simple/。滑動正在通過修改變換值發生。如果我們從插件演示頁面的示例代碼中獲取一部分html。

<div id="swipeWrapper" style="overflow: hidden; width: 2500px; box-sizing: content-box; backface-visibility: hidden; perspective: 1000px; margin: 0px; padding: 0px; transform: translateX(-500px);"></div> 

讓我們爲包裝div添加一個id作爲說明目的，並稱之爲swipeWrapper。 在您的JavaScript文件中。從div中讀取變換值。

var prevTransformValue = 0;//Initialize the value before you swipe; 
var swipeWrapper = document.getElementById('swipeWrapper'); 
var transformValue = swipeWrapper.style.transform; 
var currentTransformValue = transformValue.replace(/[^\d|^\-]/g,''); 

該示例的transformValue是「translateX（-500px）」; currentTransformValue =「-500」;

現在比較prevTransformValue> currentTransformValue滑動方向是左和prevTransformValue < currentTransformValueswipe滑動方向是正確的。

注意：不要忘記設置prevTransformValue = currentTransformValue;獲得方向值後。這個例子是如果你在水平方向上滑動。