CODEWITHSUNDEEP
javascriptjqueryhammer.js
Hurinj
Hurinj

Reputation: 59

Drag event with Hammer.js

Here is my js where i already did a swipeleft and swiperight events in order to show a toolbar on the left. (it is for a smartphone app, with touch events) I wanted to add the drag event on it, to keep control on the bar (like on menu bar of Facebook, Tinder..

Do you know how i can do it ?

$(function(){

    var page = document.getElementById("page");
    var sidebar = 0;

    Hammer(page).on("swipeleft", function(e) { 
        if (!sidebar){
            return true;
        }
          $(page).animate({left: "-=300"}, 500);
          sidebar = 0;  
    });

    Hammer(page).on("swiperight", function(e) {
        if (sidebar){
            return true;
        }
          $(page).animate({left: "+=300"}, 500) ;
          sidebar=1; 
    });
})

I already tried this but it doesn't recognize drag and e.gesture.direction...

    Hammer(page).on("drag", function(e) {
            if ( e.gesture.direction === "right" && !sidebar){
                $(page).animate({left : e.gesture.deltaX + "px"}, 0);
            }
   });

Upvotes: 0

Views: 2917

Answers (2)

Hurinj
Hurinj

Reputation: 59

Ok, I found it! You were right, @Cristy :)

Here is the working answer:

$(function(){

    var page = document.getElementById("page");
    var sidebar = 0;

    Hammer(page).on("swipeleft", function(e) { 
        if (!sidebar){
            return true;
        }
          $(page).animate({left: "-=300"}, 500);
          sidebar = 0;  
    });
    Hammer(page).on("panleft", function(e) {
         if (!sidebar){
             $(page).animate({left : e.deltaX + "px"}, 0);
         }
    });

    Hammer(page).on("swiperight", function(e) {
        if (sidebar){
            return true;
        }
          $(page).animate({left: "+=300"}, 500) ;
          sidebar=1; 
    });

    Hammer(page).on("panright", function(e) {
         if (!sidebar){
             $(page).animate({left : e.deltaX + "px"}, 0);
         }
});
})

Upvotes: 1

XCS
XCS

Reputation: 28137

The event is called pan not drag. See the docs.

Hammer(page).on("panright", function(e) {
         if (!sidebar){
             $(page).animate({left : e.gesture.deltaX + "px"}, 0);
         }
});

Upvotes: 2

Related Questions