Vue @mousemove Drag. If the mouse moves too fast, drag the mouse

demand

Use VUE to realize sliding jigsaw verification code

Step on the pit

Using @mousemove binding event dragging too fast has serious lag

The source code

<template>
  <div class="slider-verify">
    <div class="img">
      <img src="./101.jpg" class="big-img" />
      <img
        ref="block"
        src="./101.jpg"
        class="small-img"
        @mousemove="handleDragMove"
        @mousedown="handleDragStart"
        @mouseup="handleDragEnd"
      />
    </div>
    <div ref="sliderContainer" class="sliderContainer">
      <div ref="sliderMask" class="sliderMask">
        <div ref="slider" class="slider">
          <i
            class="el-icon-right"
            @mousemove="handleDragMove"
            @mousedown="handleDragStart"
            @mouseup="handleDragEnd"
          ></i>
        </div>
      </div>
      <span class="sliderText"> Slide right to fill the puzzle </span> </div> </div> </template> <script>export default {
  name: "SliderVerify",
  props: {
    width: {
      type: Number,
      default: 310
    }
  },
  data() {
    return {
      isMouseDown: false,
      originX: 0,
      originY: 0,
      slider: null,
      sliderMask: null,
      sliderContainer: null,
      block: null
    };
  },
  created() {
    this.$nextTick(() => {
      this.slider = this.$refs.slider;
      this.sliderMask = this.$refs.sliderMask;
      this.sliderContainer = this.$refs.sliderContainer;
      this.block = this.$refs.block;
    });
  },
  methods: {
    handleDragMove(e) {
      if(! this.isMouseDown)return false; const w = this.width; / / the drag and drop the mobile distance const eventX = e.c. with our fabrication: lientX | | e. ouches. [0] clientX; const moveX = eventX - this.originX;if (moveX < 0 || moveX + 40 >= w) return false;
      this.slider.style.left = moveX + "px";
      this.block.style.left = moveX + "px";
      this.sliderMask.style.width = moveX + "px"; }, handleDragStart (e) {/ / for this. Drag the starting position coordinates originX = e.c. with our fabrication: lientX | | e. ouches. [0] clientX; this.originY = e.clientY || e.touches[0].clientY; this.isMouseDown =true;
    },
    handleDragEnd(e) {
      if(! this.isMouseDown)return false;
      this.isMouseDown = false;
      const eventX = e.clientX || e.changedTouches[0].clientX;
      if (eventX === this.originX) return false; }}}; </script> ...Copy the code

The solution

Use JS native events instead of Vue V-ON events

Optimized code

<template>
  <div class="slider-verify">
    <div class="img">
      <img src="./101.jpg" class="big-img" />
      <img
        ref="block"
        src="./101.jpg"
        class="small-img"
        @mousedown="handleDragStart"
      />
    </div>
    <div ref="sliderContainer" class="sliderContainer">
      <div ref="sliderMask" class="sliderMask">
        <div ref="slider" class="slider">
          <i
            class="el-icon-right"
            @mousedown="handleDragStart"
          ></i>
        </div>
      </div>
      <span class="sliderText"> Slide right to fill the puzzle </span> </div> </div> </template> <script>export default {
  name: "SliderVerify",
  props: {
    width: {
      type: Number,
      default: 310
    }
  },
  data() {
    return {
      isMouseDown: false,
      originX: 0,
      originY: 0,
      slider: null,
      sliderMask: null,
      sliderContainer: null,
      block: null
    };
  },
  created() {
    this.$nextTick(() => {
      this.slider = this.$refs.slider;
      this.sliderMask = this.$refs.sliderMask;
      this.sliderContainer = this.$refs.sliderContainer;
      this.block = this.$refs.block; }); }, the methods: {handleDragStart (e) {/ / for this. Drag the starting position coordinates originX = e.c. with our fabrication: lientX | | e. ouches. [0] clientX; this.originY = e.clientY || e.touches[0].clientY; this.isMouseDown =true;
      document.onmousemove = (ev) => {
        if(! this.isMouseDown)return false; const w = this.width; / / the drag and drop the mobile distance const eventX = ev. ClientX | | ev. Touches [0]. ClientX; const moveX = eventX - this.originX;if (moveX < 0 || moveX + 40 >= w) return false;
        this.slider.style.left = moveX + "px";
        this.block.style.left = moveX + "px";
        this.sliderMask.style.width = moveX + "px";
      };
      document.onmouseup = (ev) => {
        if(! this.isMouseDown)return false;
        this.isMouseDown = false;
        const eventX = ev.clientX || ev.changedTouches[0].clientX;
        if (eventX === this.originX) return false; }; }}}; </script> ...Copy the code

Optimized effect

Ending……