原生JavaScript實現拖動校驗功能

更新時間：2020年09月29日 11:46:58 作者：Let me shine

這篇文章主要介紹了原生JavaScript實現拖動校驗功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現拖動校驗的具體代碼，供大家參考，具體內容如下

思路

1、頁面布局采用定位,背景顏色變化bg的寬度為0，其寬度會隨著滑塊的移動而移動。

頁面結構

<!--驗證-->
<div class="box">
  <!--滑塊-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">請滑動滑塊</p>
  <!--背景-->
  <div class="bg"></div>
</div>

頁面布局

/* 滑塊使用定位，背景沒有設置寬度*/
.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、分析事件—鼠標按下，鼠標移動，鼠標松開

2.1 鼠標按下，獲取此時事件的水平距離downX；鼠標移動，獲取此時事件的水平距離e.clientX；那么鼠標移動的距離moveX = e.clientX - downX,也就是滑塊跟著移動的距離。即btn.style.left = moveX + 'px';同時bg的寬度也就是滑塊移動的距離，即bg.style.width = moveX + 'px'

2.2 滑塊拉到頭了，表示驗證成功
什么時候表示滑塊滑到頭了，也就是moveX等于box的寬度-滑塊的寬度。那么文字的改變成“驗證成功”。且滑塊停留在了最有端。無論鼠標點擊還是移動，都不會在影響了。那就是清除事件，清除按鈕的鼠標移動和鼠標按下事件btn.onmousemove = null; btn.onmousedown = null;//清除事件
此時驗證成功，設立一個標記為表示驗證成功flag=true，后續(xù)需要用到。

2.3 那么如果我們滑塊拉到一半就松開了鼠標，滑塊應該回到原始位置。但是如果已經驗證成功了，那就不會回到原點。
鼠標松開事件觸發(fā)，那么鼠標移動已經不能影響滑塊了，那么此時需要清除移動事件btn.onmousemove = null;沒有驗證成功那就回到原點this.style.left = 0; bg.style.width = 0;

頁面動作

function selector(name) {
  return document.querySelector(name);
}
var box = selector('.box'),
  btn = selector('.btn'),
  text = selector('.text'),
  bg = selector('.bg'),
  flag = false;
// 鼠標按下，移動，松開
// 按下的距離和移動的距離差就是滑塊移動的距離
btn.onmousedown = function (e) {//按鈕按下的
  var downX = e.clientX
  btn.onmousemove = function(e){//e 事件的狀態(tài)
    var moveX = e.clientX - downX;
    if(moveX > 0) {
      this.style.left = moveX + 'px';
      bg.style.width = moveX + 'px'
      // 滑塊拉到頭了，表示驗證成功
      if (moveX >= box.offsetWidth - this.offsetWidth) {
        bg.style.zIndex = 1;// 設置bg的z-index的值是為了處理黨滑塊經過原始值的時候，bg將文字覆蓋了。驗證成功后，有讓文字顯示出來
        text.innerText = '驗證成功';
        text.style.color = '#fff';
        flag = true;
        // 此時鼠標移動或者按下，滑塊不在跟著移動了
        btn.onmousemove = null;//
        btn.onmousedown = null;//清除事件
      }
    }
  }
}
btn.onmouseup = function () {
  btn.onmousemove = null;
  // 如果驗證成功了，那就不會回到原點
  if(flag){
    return ;
  }
  this.style.left = 0;
  bg.style.width = 0;
}

完整可以運行的源碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* 滑塊使用定位，背景沒有設置寬度*/
    .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>

<!--驗證-->
<div class="box">
  <!--滑塊-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">請滑動滑塊</p>
  <!--背景-->
  <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;
  // 鼠標按下，移動，松開
  // 按下的距離和移動的距離差就是滑塊移動的距離
  btn.onmousedown = function (e) {//按鈕按下的
    var downX = e.clientX
    btn.onmousemove = function(e){//e 事件的狀態(tài)
      var moveX = e.clientX - downX;
      if(moveX > 0) {
        this.style.left = moveX + 'px';
        bg.style.width = moveX + 'px'
        // 滑塊拉到頭了，表示驗證成功
        if (moveX >= box.offsetWidth - this.offsetWidth) {
          bg.style.zIndex = 1;// 設置bg的z-index的值是為了處理黨滑塊經過原始值的時候，bg將文字覆蓋了。驗證成功后，有讓文字顯示出來
          text.innerText = '驗證成功';
          text.style.color = '#fff';
          flag = true;
          // 此時鼠標移動或者按下，滑塊不在跟著移動了
          btn.onmousemove = null;//
          btn.onmousedown = null;//清除事件
        }
      }
    }
  }
  btn.onmouseup = function () {
    btn.onmousemove = null;
    // 如果驗證成功了，那就不會回到原點
    if(flag){
      return ;
    }
    this.style.left = 0;
    bg.style.width = 0;
  }
</script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: