溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用原生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，后續需要用到。
2.3 那么如果我們滑塊拉到一半就松開了鼠標，滑塊應該回到原始位置。但是如果已經驗證成功了，那就不會回到原點。
鼠標松開事件觸發，那么鼠標移動已經不能影響滑塊了，那么此時需要清除移動事件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 事件的狀態
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 事件的狀態
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>以上就是使用原生JavaScript實現拖動校驗功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
