[SOLVED] Recognize diagonal gestures(swipe) using Hammer.js

Recognize diagonal gestures(swipe) using Hammer.js

Is it possible to recognize diagonal swipe using Hammer.js?

I have gone through their documentation but didn't find anything saying about diagonal swiping or pan etc...

Solution

An object with a lot of info about the gesture is passed to every Hammer.js event callback (as described here in the API docs).

The eventObject.angle property is what you are looking for. Its values are between -180 and 180 (0 means RIGHT, -90 means UP, 90 means DOWN, 180 means LEFT).

So here's how you can recognize diagonal swipes:

var hammertime = new Hammer(domElement);
hammertime.get("swipe").set({ direction: Hammer.DIRECTION_ALL });
hammertime.on("swipe", function(eventObject) {
    if(eventObject.angle < -90) {
        //UP-LEFT SWIPE...
    } else if(eventObject.angle < 0) {
        //UP-RIGHT SWIPE...
    } else if(eventObject.angle < 90) {
        //DOWN-RIGHT SWIPE...
    } else {
        //DOWN-LEFT SWIPE...
    }
});