原生js拖拽功能製作滑動條例項教程
阿新 • • 發佈:2021-07-14
拖拽屬於前端常見的功能,很多效果都會用到js的拖拽功能。滑動條的核心功能也就是使用js拖拽滑塊來修改位置。一個完整的滑動條包括 滑動條、滑動痕跡、滑塊、文字 等元素,先把html程式碼寫出來,如下所示:
<div class="bar_wrap" id="wrap"><!--外包裹元素-->
<div class="bar_container"><!--滑動條-->
<div class="bar_into"></div><!--滑動痕跡-->
</div>
<div class="bar_drag"><!--滑塊-->
<div class="bar_text"></div><!--文字-->
</div>
</div>
然後給各元素新增css樣式,完成下圖效果:
接下來通過分析功能,一步一步完成js程式碼。
1. 獲取滑動條各個元素,程式碼如下:
//獲取外包裹元素
var eBarWrap = document.getElementById('wrap');
//獲取滑動條
var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
//獲取滑動痕跡元素
var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
//獲取滑塊
var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
//獲取文字元素
var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];
2. 獲取滑動最大值
因為滑塊只能在滑動條內滑動,所以需要限制最大滑動位置。而DOM元素計算位置是從元素的左側開始,所以最大值應該是 滑動條的寬度-滑塊 的寬度,如下所示:
//獲取最大位置
var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;
3. 在滑塊上繫結滑鼠按下事件函式,實現拖拽滑塊功能,程式碼如下:
//滑塊新增拖拽事件
eBarDrag.addEventListener('mousedown',function(event){
});
3.1 獲取滑塊位置
需要拖動滑塊,肯定要先知道滑塊原來的位置,才能根據滑鼠的移動來拖拽滑塊。在滑塊上繫結的事件函式上有傳入一個event物件,這個event物件代表當前事件的例項物件,包含當前事件相關資訊。如下所示:
//滑塊新增拖拽事件
eBarDrag.addEventListener('mousedown',function(event){
//初始化滑鼠開始拖拽的點選位置
var nInitX = event.clientX;
//初始化滑塊位置
var nInitLeft = this.offsetLeft;
});
3.2 滑塊跟隨滑鼠移動,修改滑動痕跡和文字數值
操作時,在滑塊上按下滑鼠,再移動滑鼠就可以使滑塊跟隨滑鼠移動。但一般移動滑鼠不可能只在滑動條上面移動,所以需要在頁面上繫結滑鼠移動事件,如下所示:
//滑塊新增拖拽事件
eBarDrag.addEventListener('mousedown',function(event){
/*...*/
//頁面繫結滑鼠移動事件
document.onmousemove = event=>{
//滑鼠移動時取消預設行為,避免選中其他元素或文字
event.preventDefault();
//獲取滑鼠移動後滑塊應該移動到的位置
let nX = event.clientX - nInitX + nInitLeft;
//限制滑塊最大移動位置
if(nX>=nMax){
nX = nMax;
}
//限制滑塊最小移動位置
if(nX<=0){
nX = 0;
}
//修改滑塊位置(因為用的是箭頭函式,所以this還是指向滑塊)
this.style.left = nX + 'px';
//修改滑動痕跡寬度
eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
//修改文字數值
eBarText.innerhtml = Math.ceil(nX/nMax*100)/10;
};
});
3.3 釋放滑鼠時,固定滑塊位置
當釋放滑鼠的時候,滑塊固定在當前移動到的位置,滑動痕跡和文字數值已經一起修改。
//滑塊新增拖拽事件
eBarDrag.addEventListener('mousedown',function(event){
/*...*/
//滑鼠鬆開繫結事件,取消頁面上所有事件
document.onmouseup = function(event){
document.onmousemove = null;
document.onmouseup = null;
}
});
滑鼠按下事件函式就完成了。滑動條的樣式都可以通過css實現,但預設文字數值是空的,這不太合理,所以需要加多一句程式碼,給文字元素預設賦值為0,如下所示:
//修改預設數值
eBarText.innerHTML = 0;
http://www.ssnd.com.cn 化妝品OEM代加工
4. 在滑動條上新增點選事件
當點選滑動條上除滑塊之外的位置時,滑塊應該直接滑動到滑鼠點選的位置。需要在滑動條上新增點選事件實現此功能,程式碼如下:
//滑動條新增點選事件
eBarCon.addEventListener('click',function(event){
//設定滑動條位置
var nLeft = this.offsetLeft;
//獲取有定位的父元素
var eParent = this.offsetParent;
//迴圈所有有定位的父元素
while(eParent){
//新增定位父元素offsetLeft值,用於準確定位滑動條與頁面左側的距離
nLeft += eParent.offsetLeft;
//再次獲取父元素外的定位父元素
eParent = eParent.offsetParent;
}
//計算滑塊位置
var nX = event.clientX - nLeft;
//修改滑塊位置
eBarDrag.style.left = nX +'px';
//修改滑動痕跡寬度
eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
//修改文字數值
eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
});