ugrás a tartalomhoz

Touch esemény

deejayy · 2012. Nov. 20. (K), 10.55
Helo,

egy hasonló dolgot próbáltam létrehozni, mint ez (horizontal dragscroll):

http://deejayy.hu/share/dragscroll/

... de mobilra (cyanogen 7, stock browser, de dolphinnal is probáltam).

Addig meg is van, hogy bebindelem a touchstart/move/end eseményeket jQueryben, de nem tudom lekérdezni a pozíciót.
  1. $(akarmi).on('touchstart', function (event) {  
  2.   event.touches; // ez tartalmazná az érinteseket, akár többet is, undefined  
  3.   event.pageX; // mousedown-nál szépen visszaadja a koordinátát, itt undefined  
  4.   event.clientX; // valami touch libben láttam ezt a propertyt, szintén undefined  
  5. });  
Rosszul állok hozzá? Máshogy kellene a touch esetén a mozgást detektálni?
Van esetleg valami lib, amiből ki tudom lesni a módszert?
‹ Html paraméter átadás php nélkül Fluid stylenál a footer nem marad lent ›
 ■
1

function cancelTouch() {

Poetro · 2012. Nov. 20. (K), 11.22
  1. function cancelTouch() {  
  2.   this.removeEventListener('touchmove', onTouchMove);  
  3.   startX = null;  
  4.   isMoving = false;  
  5. }  
  6.    
  7. function onTouchMove(e) {  
  8.   if(config.preventDefaultEvents) {  
  9.     e.preventDefault();  
  10.   }  
  11.   if(isMoving) {  
  12.     var x = e.touches[0].pageX;  
  13.     var y = e.touches[0].pageY;  
  14.     var dx = startX - x;  
  15.     var dy = startY - y;  
  16.     if(Math.abs(dx) >= config.min_move_x) {  
  17.       cancelTouch();  
  18.       if(dx > 0) {  
  19.         config.wipeLeft();  
  20.       }  
  21.       else {  
  22.         config.wipeRight();  
  23.       }  
  24.      }  
  25.      else if(Math.abs(dy) >= config.min_move_y) {  
  26.       cancelTouch();  
  27.       if(dy > 0) {  
  28.         config.wipeDown();  
  29.       }  
  30.       else {  
  31.         config.wipeUp();  
  32.       }  
  33.     }  
  34.   }  
  35. }  
  36.   
  37. function onTouchStart(e) {  
  38.   if (e.touches.length == 1) {  
  39.     startX = e.touches[0].pageX;  
  40.     startY = e.touches[0].pageY;  
  41.     isMoving = true;  
  42.     this.addEventListener('touchmove', onTouchMove, false);  
  43.   }  
  44. }  
  45. if ('ontouchstart' in document.documentElement) {  
  46.   this.addEventListener('touchstart', onTouchStart, false);  
  47. }  
Forrás

Persze biztosan vannak jobbak, kidolgozottabbak, de szerintem ebből már érthető. Fontos, hogy mivel a dolog multitouch ezért vannak az események tömbbe gyűjtve.
2

Óh, szivat a jQuery, tök

deejayy · 2012. Nov. 20. (K), 14.05
Óh, szivat a jQuery, tök örülök :D

És köszönöm az irányba állítást :)