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

我已经尝试了这个，但它没有识别拖拽和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);
         }
});
})

使用Hammer.js拖动事件

2 个答案: