使用Hammer.js拖动事件

Question

这是我的js，我已经做了一个swipeleft和swiperight事件，以便在左边显示一个工具栏。(这是一个带有触摸事件的智能手机应用程序)我想在上面添加拖动事件，以保持对工具栏的控制(就像在Facebook，Tinder的菜单栏上)。

你知道我怎么做吗？

$(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; 
    });
})

我已经试过了，但它不能识别drag和e.gesture.direction...

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

Answer 1

该事件名为pan，而不是drag。参见the docs。

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

Answer 2

好了，我找到了！你是对的，@Cristy :)

这是一个可行的答案：

$(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);
         }
});
})