ユーザーがスワイプした方向をどのように知ることができますか？

Question

私はこのプラグインをDragend https://github.com/Stereobit/dragendと呼んで、タッチ機能を持っています。 Dragendよりもこのプラグインを知っているなら、これはHammertimeのコードを使っていると思います。

これらのイベントで何が起こるかを判断するには、onDragまたはonSwipeStartとonSwipeEndのようなオプションがあります。

しかし、私はちょうどどちらの方向にスワイプしたかを見分けることができません。このプラグインを知らなくても、誰かが私を助けてくれることを願っています。多分、スワイプ中/スワイプ後に行われたHTML/CSSの変更を確認するためのJQueryがありますか？

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を設定することを忘れないでください。あなたが方向の価値を得た後。この例は、水平方向にスワイプしている場合です。