如何使用 Hammer 进行滑动操作

Question

我发现了一个有趣的资源：Hammer.js。我尝试使用 Hammer 和 jQuery 进行滑动。

1) 我已经在这里下载了代码：链接
2) 我将该代码放入一个文档中，并在我想要使用滑动功能的文档头部中添加了指向该代码的链接：<script src="hammer.js"></script>
3) 我不知道如何使用它。我试图在 jQuery 中做类似于以下的操作。我的意思是，我想进行滑动而不是点击：

$(function(){
    $(".blue").click(function() {
        $(".blue").animate({left: "0"}, 500)    
    });
}) 

http://jsfiddle.net/Narcis/rmtXC/

- Nrc

Answer 1

像这样吗？http://jsfiddle.net/6jxbv/119/

我使用Hammer(element).on("event", callback);来获取结果。在这种情况下，我添加了swipeleft和swiperight事件。

该脚本使用上述语法添加事件，例如：

drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
swipe, swipeup, swipedown, swipeleft, swiperight

如果你想使用jQuery，他们提供了以下语法（如果你问我，有点笨拙）：

$(elementOrSelector).hammer().on("event", function(event) {
    //callback
});

但是您必须包括jquery.hammer.js插件。

更多信息请查看文档。

编辑：

在这里，您可以看到一个使用轻扫和拖动的示例。请注意，轻扫是快速移动（用鼠标或触摸），而拖动是按下并移动（因此实现不正确，但我会把动画留给您处理 :)）

http://jsfiddle.net/uZjCB/183/和全屏http://jsfiddle.net/uZjCB/183/embedded/result/

希望有所帮助。

- nicosantangelo

---

如果您向左滑动，则方块向左移动，如果您向右滑动，则它们向右移动。您期望的行为是什么？ - nicosantangelo

这是预期的行为。但我在Safari、Chrome和Firefox中测试http://jsfiddle.net/rTFrB/，我没有看到任何滑动或其他情况下的移动。我不明白？ - Nrc

你是在表格里还是在用鼠标的浏览器中尝试？试试 http://jsfiddle.net/Y4Bnz/embedded/result/，我用chrome和ASUS tf300平板电脑上都能正常工作。 - nicosantangelo

我试图在桌面上实现手机和平板电脑上通常使用的屏幕切换动作。这就是所谓的滑动吗？我在iMac桌面和iPad上尝试了您的fiddle，但滑动无法正常工作。拖动会有一些奇怪的反应。不管怎样，非常感谢您的努力！ - Nrc

我发现用鼠标几乎不可能触发滑动操作。你可以触发拖动，但不能触发滑动。 - Diodeus - James MacFarlane

Answer 2

使用 Hammer.js 2.0，您需要使用 Recognizer:

var blue      = document.getElementById('blue');
var hammer    = new Hammer.Manager(blue);
var swipe     = new Hammer.Swipe();

hammer.add(swipe);

hammer.on('swipeleft', function(){
   $(blue).animate({left: "-=100"}, 500)  
});

hammer.on('swiperight', function(){
   $(blue).animate({left: "+=100"}, 500)  
});

阅读更多有关 Hammer 的内容，请参阅文档

- Chris

---

我个人认为 Hammer 2.0 的实现比较复杂。例如，它会阻止默认事件的触发。 - Aero Wang

Answer 3

将JS fiddle更新为正确的Hammer cdn，现在它可以正常工作：

$(function(){  
var red = document.getElementById("red");
var blue = document.getElementById("blue");

//Swipe
Hammer(red).on("swipeleft", function() {
    $(this).find(".color").animate({left: "-=100"}, 500);
    $("#event").text("swipe left");
});

Hammer(red).on("swiperight", function() {
    $(this).find(".color").animate({left: "+=100"}, 500);
    $("#event").text("swipe right");
});

// Drag
Hammer(blue).on("dragleft", function() {
    $(this).find(".color").animate({left: "-=100"}, 500);
    $("#event").text("drag left");
});

Hammer(blue).on("dragright", function() {
    $(this).find(".color").animate({left: "+=100"}, 500);
    $("#event").text("drag right");
});

});

- gilberto lenzi

Answer 4

尝试使用hammer.js v2.0.8这种方式

https://jsfiddle.net/elijah123467/q6m84wgt/6/

var body = $("#body");
var navbar = $("#navbar");

var hammertimeBodyRight = new Hammer.Manager(body[0], {
    recognizers: [
        [Hammer.Swipe, { direction: Hammer.DIRECTION_RIGHT}]
    ]
});

hammertimeBodyRight.on("swipe", function (ev) {
    var canvasSlid = navbar.hasClass("canvas-slid");
    if (!canvasSlid) {
        $(".navbar-toggle").click();
    }
});

var hammertimeBodyLeft = new Hammer.Manager(body[0], {
    recognizers: [
        [Hammer.Swipe, { direction: Hammer.DIRECTION_LEFT}]
    ]
});

hammertimeBodyLeft.on("swipe", function (ev) {
    var canvasSlid = navbar.hasClass("canvas-slid");
    if (canvasSlid) {
        $(".navbar-toggle").click();
    }
});

var hammertimeNavbarRight = new Hammer.Manager(navbar[0], {
    recognizers: [
        [Hammer.Swipe, { direction: Hammer.DIRECTION_RIGHT}]
    ]
});

hammertimeNavbarRight.on("swipe", function (ev) {
    var canvasSlid = navbar.hasClass("canvas-slid");
    if (!canvasSlid) {
        $(".navbar-toggle").click();
    }
});

var hammertimeNavbarLeft = new Hammer.Manager(navbar[0], {
    recognizers: [
        [Hammer.Swipe, { direction: Hammer.DIRECTION_LEFT}]
    ]
});

hammertimeNavbarLeft.on("swipe", function (ev) {
    var canvasSlid = navbar.hasClass("canvas-slid");
    if (canvasSlid) {
        $(".navbar-toggle").click();
    }
});

- elijah123467