如何使用Hammer进行推送

Question

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

1)我已经下载了代码here

2)我已经将该代码放入了文档中。我在要使用swipe的文档的头部放了一个代码的链接：<script src="hammer.js"></script>

3)我不知道如何使用它。我尝试在jQuery中做类似的事情。我的意思是，我想要滑动而不是点击：

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

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

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插件

有关更多信息，请尝试阅读the docs

编辑：

在这里，您可以看到一个使用卷帘和拖动的示例。考虑到swipe是一种快速移动(使用鼠标或触摸)，而拖动是按下并移动的(所以它的实现是不正确的，但我会把动画留给你。:)

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

希望能有所帮助

Answer 2

在Hammer.js 2.0中，您需要使用识别器：

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

阅读更多关于锤子documentation的内容

Answer 3

使用正确的Hammer cdn更新JS fiddle，现在它可以工作了：

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

})；