jQuery 如何使用 Hammer 刷卡

How to use Hammer to swipe

提问by Nrc

I've found an interesting resource: Hammer.js. I tried to swipe with Hammer and jQuery.

我发现了一个有趣的资源：Hammer.js。我试着用 Hammer 和 jQuery 刷卡。

1) I've downloaded the code here
2) I've put that code in a document. I put a link to that code in the head of the document I want to use swipe: <script src="hammer.js"></script>
3) I do not know how to use it. I try to do something similar to this in jQuery. I mean I want to swipe instead of click:

1) 我已在此处下载代码
2) 我已将该代码放入文档中。我在要使用 swipe 的文档的头部添加了指向该代码的链接：<script src="hammer.js"></script>
3) 我不知道如何使用它。我尝试在 jQuery 中做类似的事情。我的意思是我想滑动而不是点击：

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

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

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

回答by nicosantangelo

Something like this? http://jsfiddle.net/6jxbv/119/

像这样的东西？http://jsfiddle.net/6jxbv/119/

I'm using Hammer(element).on("event", callback);to get the result. In this case, I added the swipeleftand swiperightevents.

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

The script uses the syntax described above to add events like:

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

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

If you want to use it with jQuery, they provide this syntax (which is kind of awkward if you ask me):

如果您想将它与 jQuery 一起使用，它们会提供以下语法（如果您问我，这有点尴尬）：

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

But you have to include the jquery.hammer.jsplugin

但是你必须包含jquery.hammer.js插件

Try reading the docsfor more info

尝试阅读文档以获取更多信息

EDIT:

编辑：

Here, you can see an example using swipe and drag. Take into account that swipe is a fast movement (with the mouse or touch) and drag is pressing and moving (so the implementation it's not correct, but I'll leave the animate to you. :) )

在这里，您可以看到使用滑动和拖动的示例。考虑到滑动是一种快速移动（使用鼠标或触摸），而拖动是按压和移动（因此实现它是不正确的，但我会将动画留给您。:)）

http://jsfiddle.net/uZjCB/183/and full screen http://jsfiddle.net/uZjCB/183/embedded/result/

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

Hope it helps

希望能帮助到你

回答by Chris

With Hammer.js 2.0 you need to use a Recognizer :

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

read more on Hammer documentation

阅读有关 Hammer文档的更多信息

回答by gilberto lenzi

updating the JS fiddlewith correct Hammer cdn so now it's working:

使用正确的 Hammer CDN更新JS 小提琴，现在它正在工作：

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

});

});

回答by elijah123467

Try this way with hammer.js v2.0.8

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

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

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