Search code examples
javascriptjquerytouchhammer.js

How to set different velocity to recognise swipes with hammer.js jQuery plugin?


I'm having issues finding / figuring out how to add options to hammer.js when using it's jQuery plugin. This is how I initiate hammer:

            /* Create Hammer object for swipable game cards */
            $('.game-card-mobile')
            .hammer()
            .bind('swiperight swipeleft press', function(ev) {
              console.log(ev.type);
            });

I find it that in order for swipe action to be performed a relatively fast swipe needs to occur, I want to decrease speed of swipe required to fire the event. After reading through the docs: http://hammerjs.github.io/recognizer-swipe/ There seems to be a velocity option that defaults to 0.65, so I assume this can be changed somehow to lets say 0.5 in order to fire event on slower swipes?

EDIT: if this would be of any help here are some examples of tests for swipe written in javascript: https://github.com/hammerjs/hammer.js/blob/master/tests/unit/gestures/test_swipe.js
this shows example of how {threshold: 1} is set, I'm trying to achieve this while using jQuery plugin.


Solution

  • The link you post, is from a library Called Hammer.js. You must import this library in your project to make it work.

    Minimal velocity required before recognizing, unit is in px per ms as they say, then it´s 0.65px each millisecond, then making it 0.50 should make the event occur with less velocity in the touch.

    0.50 -> will fire before

    0.80 -> more difficult to fire

    var hammertime = new Hammer(myElement, myOptions);
    hammertime.on('swipe', function(ev) {
        alert(ev);
    });
    
    hammertime.get('swipe').set({ velocity: 0.80});
    

    Is maybe the right way?

    Hoy it helps you.


    Edit: As said in the jquery api page: The Hammer instance is stored at $element.data("hammer").

    Then maybe

    $("#yourdivtoswipe_id").data('hammer').get('swipe').set({ velocity: 0.80});
    

    Regards