Move the touch event

  • Touchstart is triggered when a finger is pressed on the screen (corresponding to PC mouseDown)
  • Touchmove is triggered when a finger is moved on the screen (corresponding to PC Mousemove)
  • Touchend is triggered when a finger is raised on the screen (corresponding to PC mouseup)
  • The touchCancel is triggered when some higher-level event (such as a phone call or a pop-up message) cancels the current touch operation. It usually pauses the game, saves, and so on with ‘TouchCancel’.

Each touch event contains three touch lists, each containing a corresponding series of touch points (for multi-touch) :

  • Touches: A list of all fingers currently on the screen
  • TargetTouches: List of fingers on the current DOM element
  • ChangedTouches: A list of fingers that touch the current event

Each Touch object contains the following properties:

  • ClientX: Touch the x coordinate of the target in the viewport.

  • ClientY: Touch the target’s y coordinate in the viewport.

  • Identifier: Unique ID that identifies a touch.

  • PageX: Touch the x coordinate of the target in the page.

  • PageY: Touch the y coordinate of the target on the page.

  • ScreenX: Touches the x coordinate of the target on the screen.

  • ScreenY: Touches the y coordinate of the target on the screen.

  • Target: the DOM node target to be touched.

DOM structure

 <div v-show="showBackIndex" :class="homeBth" id="moveDiv"
         @mousedown="down($event)" @touchstart="down($event)"
         @mousemove="move($event)" @touchmove="move($event)"  
         @mouseup="end($event)" @touchend="end($event)" @click="goIndex">
      <img src=".. /.. /assets/images/arrow-1.png" class="icon"<span> </div>Copy the code

The vant van-button tag was originally used, but the drag function was changed to div

Defined variable

  private flags: any = false;
  private position: any = {x: 0, y: 0};
  private nx: any = ' ';
  private ny: any = ' ';
  private dx: any = ' ';
  private dy: any = ' ';
  private xPum: any = ' ';
  private yPum: any = ' ';
Copy the code

methods

Private down (e: any) {let moveDiv = document.getElementById('moveDiv'); // Get the DOM element this.flags = based on the idtrue;
    let touch;
    if (e.touches) {
      touch = e.touches[0];
    } else{ touch = e; } this.position.x = touch.clientX; this.position.y = touch.clientY; this.dx = moveDiv! .offsetLeft; // ts will tell you that moveDiv may be empty, so you can either declare it empty or add it after passing the variable! The operator tells TypeScript that the variable is not null this.dy = moveDiv! .offsetTop; } private move (e: any) {let moveDiv = document.getElementById('moveDiv');
    if (this.flags) {
      let touch;
      if (e.touches) {
        touch = e.touches[0];
      } else{ touch = e; } this.nx = touch.clientX - this.position.x; this.ny = touch.clientY - this.position.y; this.xPum = this.dx + this.nx; this.yPum = this.dy + this.ny; moveDiv! .style.left = this.xPum +'px'; moveDiv! .style.top = this.yPum +'px'; / / to prevent sliding of the page document. The default events addEventListener ('touchmove', () => {// If the sliding problem is encountered, please check whether touchMove e.preventDefault() is obtained; // jq prevents bubble Propagation(); StopPropagation ()}, {passive:false}); // The third argument to addEventListener () is passed to {passive:false}, justfalse}} // Mouse release function privateend () {
    this.flags = false; }}Copy the code

Refer to the article

Vue mobile implements div drag and drop movement

TS passes a reference indicating that the object may be empty (React version)

AddEventListener the third parameter passive