javascript - 使用 Hammer.js 拖动事件

Question

这是我的js，我已经做了向左滑动和向右滑动事件，以便在左侧显示工具栏。 (它适用于智能手机应用程序，带有触摸事件)我想在其上添加拖动事件，以保持对栏的控制(例如 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; 
    });
})

我已经尝试过这个，但它无法识别拖动和 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

该事件称为平移而不是拖动。请参阅the docs .

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