javascriptangularjsswipeswipe-gestureangularjs-ng-touch

rotate image while swipe is in progress using angular ng-swipe-left and ng-swipe-right


I'm using angular's ng-swipe-left and ng-swipe-right to catch swipe event (in touch). I'm trying to make an image rotate according to the swipe speed and diraction while swipe is in progress. The problem is that I'm able to catch the event only when the swipe end.


Solution

  • You have to listen to the start event. It is called on either mousedown or touchstar. But your problem is that: After the start event, $swipe is watching for touchmove or mousemove events that still ignored until the total distance moved in either dimension exceeds a small threshold.

    Once this threshold is exceeded, the move event is created.

    So you have to add a listener on the move event, wath is not possible with only Angularjs.

    I think you have to use somethig with JQuery like this:

    $('#someElm').bind('touchmove',function(e){
          e.preventDefault();
          var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
          var elm = $(this).offset();
          var x = touch.pageX - elm.left;
          var y = touch.pageY - elm.top;
          if(x < $(this).width() && x > 0){
              if(y < $(this).height() && y > 0){
                      //CODE GOES HERE
                      console.log(touch.pageY+' '+touch.pageX);
              }
          }
    });
    

    Angular documentation on this issue: AngularJS API : $swipe