éléments de panoramique sur le toucher - jQuery

Question

J'essaie de pan éléments sur le toucher, j'utilise ce qui suit pour calculer la distance parcourue par l'utilisateur (et ajouter des transitions/fonctions après un glissement a initialisé) Comment puis-je obtenir le temps réel les valeurs du glissement et de l'animation disent une DIV pour suivre le doigt?

J'utilise le code suivant pour obtenir la fonctionnalité swipe:

Standalone jQuery "touch" method?

Answer 1

vous devez prendre le script à part un peu pour obtenir la fonctionnalité dont vous avez besoin. essentiellement ce que vous avez, il sauve le « swipe » à un événement unique, vous devez capturer l'événement touchMove quelque chose comme ceci:

//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 
    } 

devrait être quelque chose comme ça de toute façon, havnt testé cependant.