Native JavaScript realizes drag verification function

This article example for everyone to share JavaScript to achieve drag verification of the specific code, for your reference, the specific content is as follows

Train of thought

1. The page layout adopts positioning, and the width of bg is 0 when the background color changes, and its width will move with the slider.

Page structure

<!-- Validation -->
<div class="box">
  <!-- Slider -->
  <div class="btn"></div>
  <!-- Text -->
  <p class="text"> Please slide the slider </p>
  <!-- Background -->
  <div class="bg"></div>
</div>

Page layout

/*  The slider uses positioning, and the background has no width */
.box {
  width: 250px;
  height: 50px;
  background-color: #ccc;
  position: relative;
  margin: 0 auto;
}
.btn {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  color: #ccc;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 4;
}
.text {
  position: absolute;
  height: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  user-select: none;
}
.bg {
  width: 0;
  height: 50px;
  background-color: #25c20f;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}

2. Analyze Events-Mouse Press, Mouse Move, Mouse Release

2.1 Press the mouse to obtain the horizontal distance downX; of the event at this time; Move the mouse to get the horizontal distance of the event e. clientX; Then the distance the mouse moves moveX = e. clientX-downX, which is the distance the slider follows. That is, btn. style. left = moveX + 'px'; At the same time, the width of bg is the distance that the slider moves, that is, bg. style. width = moveX + 'px'

2.2 The slider is pulled to the head, indicating that the verification is successful
When the slider has reached the head, that is, moveX is equal to the width of box-the width of the slider. Then the text changes to "verification successful". And the slider stays at the most end. No matter whether the mouse clicks or moves, it will not affect it any more. That is the clear event, the mouse movement of the clear button and the mouse press event btn. onmousemove = null; btn. onmousedown = null; //Clear Events
At this time, the verification is successful, and one mark is set up to indicate the verification is successful, which is needed later.

2.3 Then if we pull the slider to one and a half and release the mouse, the slider should return to its original position. But if it has been verified successfully, it will not return to the original point.
When the mouse release event is triggered, the mouse movement can no longer affect the slider, so it is necessary to clear the movement event btn. onmousemove = null; If the verification is not successful, return to the origin this. style. left = 0; bg. style. width = 0;

Page action

function selector(name) {
  return document.querySelector(name);
}
var box = selector('.box'),
  btn = selector('.btn'),
  text = selector('.text'),
  bg = selector('.bg'),
  flag = false;
//  Press, move and release the mouse 
//  The difference between the distance pressed and the distance moved is the distance moved by the slider 
btn.onmousedown = function (e) {// Button pressed 
  var downX = e.clientX
  btn.onmousemove = function(e){//e  The state of the event 
    var moveX = e.clientX - downX;
    if(moveX > 0) {
      this.style.left = moveX + 'px';
      bg.style.width = moveX + 'px'
      //  The slider is pulled to the head, indicating that the verification is successful 
      if (moveX >= box.offsetWidth - this.offsetWidth) {
        bg.style.zIndex = 1;//  Settings bg Adj. z-index The value of is used to handle when the party slider passes through the original value, bg Overwritten the text. After the verification is successful, the text is displayed 
        text.innerText = ' Verification succeeded ';
        text.style.color = '#fff';
        flag = true;
        //  At this time, the mouse moves or presses, and the slider no longer follows 
        btn.onmousemove = null;//
        btn.onmousedown = null;// Clear event 
      }
    }
  }
}
btn.onmouseup = function () {
  btn.onmousemove = null;
  //  If the verification is successful, it will not go back to the original point 
  if(flag){
    return ;
  }
  this.style.left = 0;
  bg.style.width = 0;
}

Complete running source code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*  The slider uses positioning, and the background has no width */
    .box {
      width: 250px;
      height: 50px;
      background-color: #ccc;
      position: relative;
      margin: 0 auto;
    }
    .btn {
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      color: #ccc;
      background-color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
      z-index: 4;
    }
    .text {
      position: absolute;
      height: 50px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      user-select: none;
    }
    .bg {
      width: 0;
      height: 50px;
      background-color: #25c20f;
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>

<!-- Validation -->
<div class="box">
  <!-- Slider -->
  <div class="btn"></div>
  <!-- Text -->
  <p class="text"> Please slide the slider </p>
  <!-- Background -->
  <div class="bg"></div>
</div>

<script>
  function selector(name) {
    return document.querySelector(name);
  }
  var box = selector('.box'),
    btn = selector('.btn'),
    text = selector('.text'),
    bg = selector('.bg'),
    flag = false;
  //  Press, move and release the mouse 
  //  The difference between the distance pressed and the distance moved is the distance moved by the slider 
  btn.onmousedown = function (e) {// Button pressed 
    var downX = e.clientX
    btn.onmousemove = function(e){//e  The state of the event 
      var moveX = e.clientX - downX;
      if(moveX > 0) {
        this.style.left = moveX + 'px';
        bg.style.width = moveX + 'px'
        //  The slider is pulled to the head, indicating that the verification is successful 
        if (moveX >= box.offsetWidth - this.offsetWidth) {
          bg.style.zIndex = 1;//  Settings bg Adj. z-index The value of is used to handle when the party slider passes through the original value, bg Overwritten the text. After the verification is successful, the text is displayed 
          text.innerText = ' Verification succeeded ';
          text.style.color = '#fff';
          flag = true;
          //  At this time, the mouse moves or presses, and the slider no longer follows 
          btn.onmousemove = null;//
          btn.onmousedown = null;// Clear event 
        }
      }
    }
  }
  btn.onmouseup = function () {
    btn.onmousemove = null;
    //  If the verification is successful, it will not go back to the original point 
    if(flag){
      return ;
    }
    this.style.left = 0;
    bg.style.width = 0;
  }
</script>
</body>
</html>