32

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/

illright
  • 3,991
  • 2
  • 29
  • 54
Nrc
  • 9,577
  • 17
  • 67
  • 114

4 Answers4

34

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

nicosantangelo
  • 13,216
  • 3
  • 33
  • 47
  • I read the docs before asking, but I am really confused, I do not understand very well. Perhaps I am doing something wrong, but I think your code does not work. Have you check it? – Nrc Jun 01 '13 at 15:32
  • If you swipe left the squares move to the left, and if you swipe right they move to the right. What is your expected behaviour? – nicosantangelo Jun 01 '13 at 15:33
  • This is the expected behaviour. But I test http://jsfiddle.net/rTFrB/ in Safari, Chrome, and Firefox and I do not see nothing moving on swipe or in any case. I do not understand? – Nrc Jun 01 '13 at 15:47
  • Are you trying it in a table or in your browser with a mouse?. Try http://jsfiddle.net/Y4Bnz/embedded/result/ it's working for me in chrome with a mouse and in a ASUS tf300 tablet. – nicosantangelo Jun 01 '13 at 16:22
  • @Nrc well, in case you are confusing swipe with drag, remember that swipe is a fast movement, take a look at this fiddle: http://jsfiddle.net/uZjCB/2/ I'll edit the answer with it as well. I tested it and it's working. I hope it helps – nicosantangelo Jun 01 '13 at 16:37
  • I try to do in a desktop the usual movement that we do in phones and tablets to go to one screen to another. Is this swipe?. I try your fiddle in a iMac desktop and in a iPad, and swipe does not work. Drag does something but in a bit estrange way. Anyway, thank you very much for your eford! – Nrc Jun 01 '13 at 17:26
  • I found that it's almost impossible to trigger a swipe with a mouse. You can trigger a drag, but not a swipe. – Diodeus - James MacFarlane Apr 08 '14 at 18:18
  • I am trying http://jsfiddle.net/uZjCB/2/embedded/result/ using iPhone 5/iOS 7.1.1/Safari and OSX 10.9.3/Safari 7.0.1 and OSX 10.9.3/Chrome 35.0.1916.114 No matter what I try I cannot get that bitch to move one pixel. – William Entriken May 26 '14 at 02:22
  • full screen example has following error `Hammer is not defined` – IgorCh May 29 '14 at 07:57
  • Hammer moved the source of the script that's why it wasn't defined properly. I updated the urls. – nicosantangelo Jul 17 '14 at 18:48
  • Hey @NicoSantangelo thanks for all your work here, does this need another update though? the drag is not giving me any changes. – samuelkobe Jan 27 '15 at 23:28
12

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

Chris
  • 1,016
  • 1
  • 14
  • 18
5

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

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

});

0

Try this way with 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
  • 101
  • 1
  • 11