Moving end of the sliding direction of judgment

The moving end of the sliding direction of judgment, mainly to determine the use of x, Y axis direction of the increment, which axis increased faster, is which direction.

Get the initial point in Touchstart, StartX, Starty;

Get moving points in Touchmove, MoveX, Movey

Calculate the difference between the two deltax = Movex-startx; DeltaY = Movey-starty;

Then accumulate DeltaX and DeltaY:

Distx + = Math.Abs (deltax)
Disty + = Math.Abs (DeltaY)

if (Distx > Disty && deltax > 0) {
Console.log (' Right slide ')
}
if (Distx > Disty && deltax < 0) {
Console.log (' Left slide ')
}
if (Distx < disty && DeltaY < 0) {
Console.log (' Top slip ')
}
if (Distx < disty && DeltaY > 0) {
Console.log (' slipping ')
}

The idea is this, the code is as follows

<! DOCTYPE html>#box {width:100%;      height:500px;     Background:orange; }    </style> Let Startx,starty,movex,movey,deltax,deltay; Let Distx= 0Let disty= 0Let box= document.getElementById (' box ') Box.addeventlistener (' Touchstart ',function(e) { let point= E.touches? E.touches[0]: E startX=Point.pagex Starty=Point.pagey Distx= 0Disty= 0}) Box.addeventlistener (' Touchmove ',function(e) { let point= E.touches? E.touches[0]: E moveX=Point.pagex Movey=Point.pagey DeltaX= MoveX-StartX DeltaY= Movey-Starty Distx+=Math.Abs (deltax) disty+=Math.Abs (DeltaY) console.log (DISTX, Disty)if(Distx > Disty && deltax > 0) {Console.log (' Right slide ')          }           if(Distx > Disty && deltax < 0) {Console.log (' Left Slide ')          }          if(Distx < disty && DeltaY < 0) {Console.log (' Slide up ')          }           if(Distx < disty && DeltaY > 0) {Console.log (Decline)          }      })    </script> </body>
Moving end of the sliding direction of judgment