How to use Hammer to swipe

Question

I've found an interesting resource: Hammer.js. I tried to swipe with Hammer and 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:

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

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

Answer 1

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

I'm using Hammer(element).on("event", callback); to get the result. In this case, I added the swipeleft and swiperight events.

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):

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

But you have to include the jquery.hammer.js plugin

Try reading the docs for 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/

Hope it helps

Answer 2

With Hammer.js 2.0 you need to use a 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