Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

The PTC Community email address has changed to Learn more.

Javascript to enable swipe on iOS and Android.


Javascript to enable swipe on iOS and Android.

This code will enable swipe up, swipe down, swipe left, swipe right, swipe from left edge, swipe from right edge, swipe from top edge, and swipe from bottom edge capabilities on iOS and Android.  Replace the valueDisplay lines below with the code you want to run for each swipe.  There is a function to turn the touch listeners off; you'll likely want to exclude the coordinates of the 2d elements like sliders or disable the listeners while users are using the sliders.  If you don't, moving the slider will cause the swipe to execute.

//Touch gesture variables

var NumberofFingersTouch;

var FingerStartX;

var FingerStartY;

var LeftEdgeSwipeOffset = 50;

var RightEdgeSwipeOffset = 50;

var TopEdgeSwipeOffset = 50;

var BottomEdgeSwipeOffset = 50;

var SwipeDistance = 120;

//Enable touch controls for swipe, move, and rotate

$scope.EnableTouchControls = function() {

  window.addEventListener("touchstart", $scope.TouchStartFunction);

  window.addEventListener("touchmove", $scope.TouchMoveFunction);

  window.addEventListener("touchend", $scope.TouchEndFunction);


//Disable touch controls for swipe, move, and rotate

$scope.DisableTouchControls = function() {

  window.removeEventListener("touchstart", $scope.TouchStartFunction);

  window.removeEventListener("touchmove", $scope.TouchMoveFunction);

  window.removeEventListener("touchend", $scope.TouchEndFunction);


$scope.TouchStartFunction = function(event) {

  //event.touches.length gives the number of fingers touching the screen

  NumberofFingersTouch = event.touches.length;

  if (NumberofFingersTouch == 1) {               

       //Finger starting X location 

       FingerStartX = event.touches[0].pageX;

       //Finger starting Y location

       FingerStartY = event.touches[0].pageY;     



  //Update the scope



$scope.TouchMoveFunction = function(event) {       

  if (NumberofFingersTouch == 1) {

  //Check for swipe from left edge 

  if (((event.touches[0].pageX - FingerStartX) >= SwipeDistance) && (FingerStartX <= LeftEdgeSwipeOffset)) {


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from left edge.'     

  //Check for swipe from right edge 

  } else if (((FingerStartX - event.touches[0].pageX) >= SwipeDistance) && (FingerStartX >= (window.innerWidth - RightEdgeSwipeOffset))) {     


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from right edge.'     


  //Check for swipe from top edge 

  } else if (((event.touches[0].pageY - FingerStartY) >= SwipeDistance) && (FingerStartY <= TopEdgeSwipeOffset)) {


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from top edge.'     


  //Check for swipe from bottom edge 

  } else if (((FingerStartY - event.touches[0].pageY) >= SwipeDistance) && (FingerStartY >= (window.innerHeight - BottomEdgeSwipeOffset))) {


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from bottom edge.'       

  //Check for swipe left 

  } else if ((FingerStartX - event.touches[0].pageX) >= SwipeDistance) {     


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe left.'      


  //Check for swipe right 

  } else if ((event.touches[0].pageX - FingerStartX) >= SwipeDistance) {


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe right.'       


  //Check for swipe down

  } else if ((event.touches[0].pageY - FingerStartY) >= SwipeDistance) {


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe down.'      


  //Check for swipe up 

  } else if ((FingerStartY - event.touches[0].pageY) >= SwipeDistance) {


  $scope.view.wdg['valueDisplay-1']['value'] = 'Swipe up.'     





  //Update the scope



$scope.TouchEndFunction = function(event) {     


  //Update the scope




Hi Rusty Abernathy Is this code still working?

I would like to try it out but its not working for me.



Aahhh I got it. For future reference I had to run the 'EnableTouchControls' function.

My next step is to try get is only to run in the swipe occurs from part of the screen where the model placed. This way I can hopefully manipulate it like you can manipulate the model if using the spatial marker.