Woher weiß ich, in welche Richtung der Benutzer geklaut hat?

Question

Ich benutze dieses Plugin namens Dragend https://github.com/Stereobit/dragend, um eine Touch-Funktion zu haben. Ich denke das nutzt etwas Code von Hammertime, wenn du dieses Plugin mehr kennst als Dragend.

Es gibt Optionen wie onDrag oder onSwipeStart und onSwipeEnd, um festzustellen, was bei diesen Ereignissen passiert.

Allerdings kann ich einfach nicht herausfinden, in welcher Richtung ich gerade geklaut habe. Auch wenn du dieses Plugin nicht kennst, hoffe ich, dass mir jemand helfen kann. Vielleicht mit etwas JQuery, um die HTML/CSS-Änderungen zu überprüfen, die während/nach dem Wischen gemacht wurden?

Answer 1

Blick auf das Plugin http://stereobit.github.io/dragend/demos/simple/. Der Swipe wird ausgeführt, indem der Transformationswert geändert wird. Wenn wir einen Teil von html aus dem Beispielcode von der Plugin-Demoseite nehmen.

<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> 

Lassen Sie uns eine ID für die Verpackung div für Illustrationszwecke hinzufügen und es swipeWrapper nennen. In Ihrer Javascript-Datei. Lies den Transformwert vom 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,''); 

Der transformValue aus dem Beispiel ist "translateX (-500px)"; currentTransformValue = "-500";

Vergleichen Sie jetzt prevTransformValue> currentTransformValue Die Swipe-Richtung ist links und prevTransformValue < currentTransformValuesWischen Swipe-Richtung ist rechts.

Hinweis: vergessen Sie nicht, prevTransformValue = currentTransformValue; nachdem du den Richtungswert bekommen hast. Dieses Beispiel ist, wenn Sie in horizontaler Richtung wischen.