Using jQuery to rotate an element on swipe/drag

0 votes
asked Jun 18, 2014 by jamesg

I wish to have a circle that rotates ALONG WITH the users swipe/gragging across a screen. I am using Phonegap to make the app, and have thought about using hammer.js as a lot of people recommend it.

I have seen loads of posts about clicking a div to rotate it by 90 degrees etc.. all that is easy, but I require it so a users swipe or drag gesture can rotate an element in "real-time". As in the element will rotate to the speed of the swipe and also as the finger is actually touching the screen - giving it a native feel.

Any ideas?

1 Answer

0 votes
answered Nov 29 by vanojx1

Im using this plugin that work very nice. Can handle multi finger swipe/drag drag start/end ecc

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

here a working code example:

$(function() { $("body").swipe( { swipe:function(event, direction, distance, duration, fingerCount, fingerData) { if(direction=="right" && fingerCount==2 && distance>100){ //do something } else if(direction=="right" && distance>100){ //do other.... } else if(direction=="left" && distance>100){ //other and other.... } }, threshold:0, fingers:'all' }); $('body').swipe("option","allowPageScroll","vertical"); });
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...