CODEWITHSUNDEEP
javascriptjqueryhammer.jsdragendjs
AlexioVay
AlexioVay

Reputation: 4527

How can I know which direction the user swiped?

I use this plugin called Dragend https://github.com/Stereobit/dragend to have a touch-function. I think this uses some code of Hammertime, if you know this plugin more than Dragend.

There are Options like onDrag or onSwipeStart and onSwipeEnd to determine what happens on these events.

However I just can't figure out how to see in which direction I just swiped. Even if you dont know this plugin, I hope someone could help me out. Maybe with some JQuery to check the HTML/CSS changes that were made during/after swiping?

Upvotes: 0

Views: 326

Answers (1)

helenys
helenys

Reputation: 41

Looking at the plugin http://stereobit.github.io/dragend/demos/simple/. The swipe is happening by modified the transform value. If we take some part of html from the example code from the plugin demo page. 

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

Let us add an id for the wrapping div for illustration purpose and call it swipeWrapper. In your javascript file. Read the transform value from the 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,'');

The transformValue from the example is "translateX(-500px)"; currentTransformValue = "-500";

Now compare prevTransformValue > currentTransformValue the swipe direction is left and prevTransformValue < currentTransformValueswipe swipe direction is right.

Note: don't forget to set prevTransformValue = currentTransformValue; after you get the direction value. This example is if you are swiping in horizontal direction.

Upvotes: 1

Related Questions