pan elements on touch - jQuery

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 follo开发者_JS百科w the finger along ?

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

Standalone jQuery "touch" method?

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.