1

I am trying to pan elements on touch, i am using the following to calculate the distance the user has swiped (and add transitions / functions after a swipe has initialised) How would i get the real time values of the swipe and animate say a DIV to follow the finger along ?

I am using the following code to achieve the swipe functionality:

Standalone jQuery "touch" method?

Community
  • 1
  • 1
Xavier
  • 8,244
  • 18
  • 54
  • 85

1 Answers1

1

you need to take the script apart a bit to achieve the functionality you need. basically what you have there is saving the "swipe" to a single event, you need to capture the touchMove event something like this:

//add to the decleration:
var defaults = {
    threshold: {
        x: 30,
        y: 10
    },
    swipeLeft: function() { alert('swiped left') },
    swipeRight: function() { alert('swiped right') },
    //THIS:
    swipeMove: function(distance) { alert('swiped moved: '+distance.x+' horizontally and '+distance.y+' vertically') },
    preventDefaultEvents: true
};

//add this to the init vars section
var lastpoint = {x:0, y:0}

//add an init to the lastpoint at start of swipe
function touchStart(event) {
        console.log('Starting swipe gesture...')
        originalCoord.x = lastpoint.x = event.targetTouches[0].pageX
        originalCoord.y = lastpoint.y = event.targetTouches[0].pageY
    }

//this is where you do your calculation
function touchMove(event) {
        if (defaults.preventDefaultEvents)
            event.preventDefault();

        var difference = {
            x:event.targetTouches[0].pageX - lastpoint.x,
            y:event.targetTouches[0].pageY - lastpoint.y
        }
        //call the function
        defaults.swipeMove(difference);

        finalCoord.x = lastpoint.x = event.targetTouches[0].pageX 
        finalCoord.y = lastpoint.y = event.targetTouches[0].pageY
    }

should be something like that anyway, havnt tested it though.

longstaff
  • 2,061
  • 1
  • 12
  • 15
  • you need to make the above amendments to the code you were refering too, this is not the complete code. you got to do a bit of work ;) – longstaff Aug 08 '11 at 07:32
  • thanks after checking it out i was missing a few lines, works great +1 – Xavier Aug 12 '11 at 07:57