JQuery touch swipe event / no jQuery mobile

Question

I have been looking for some time for a good jQuery library that will allow me to attach touch events to DOM elements, especially swipe the screen.

I tried hammer.js, in the documentation it says that it has a swipe effect, but when I try to attach it as $ ('. Element'). on ('swipe', function () {// do smth}); he does not work.

I managed to simulate napkins using its "dragend" event, but the bad thing is that sometimes it works, sometimes it doesn't.

To be more specific as to what I want to achieve, check the Twitter website on your phone and try to scroll left / right the twist in your timeline / feed, it should open some action buttons for “Reply” / “Retweet '/ 'Favorites'.

Can someone give me some sample code or a library with good documentation on how I can do this?

PS: I can not use jQuery mobile for this project.

Answer 1

I cannot help you with the library, but I can copy / paste what I use to make a saber using jQuery. This example is intended only for scrolling up and down, but quite easily adapts to other gestures.

This is part of the plugin:

;(function($) { $.fn.tactile = function(swipe) { return this.each(function() { var $this = $(document), isTouching = false, debut; // means start in french $this.on('touchstart', debutGeste); function debutGeste() { // means start of gesture if (event.touches.length == 1) { debut = event.touches[0].pageY; isTouching = true; $this.on('touchmove', geste); } } function finGeste() { // means end of gesture $this.off('touchmove'); isTouching = false; debut = null; } function geste() { // geste means gesture if(isTouching) { var actuel = event.touches[0].pageY, delta = debut - actuel; if (Math.abs(delta) >= 30) { // this '30' is the length of the swipe if (delta > 0) { swipe.up(); } else { swipe.down(); } finGeste(); } } event.preventDefault(); } }); }; })(jQuery); 

This is part of using:

 $(document).tactile({ up: function() { }, down: function() { } }); 

I can not promise that this is the right way, and this is good code, but it works.

Answer 2

Can't you use jQuery mobile? Can you use Sencha? http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/touchevents

Answer 3

If you are using the hammer.js jQuery version, this should not be:

$ ('. element'). hammer (). on ('swipe', function () {// do smth});

I think you need a Hammer object to handle specific jQuery events. From what I read, Hammer does not introduce them as regular jQuery custom events.