快捷導(dǎo)航

原生js拖拽功能制作滑動(dòng)條實(shí)例代碼

更新時(shí)間：2021年02月05日 08:39:17 作者：蔣偉平

這篇文章主要介紹了原生js拖拽功能制作滑動(dòng)條實(shí)例教程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

拖拽屬于前端常見(jiàn)的功能，很多效果都會(huì)用到j(luò)s的拖拽功能?；瑒?dòng)條的核心功能也就是使用js拖拽滑塊來(lái)修改位置。一個(gè)完整的滑動(dòng)條包括滑動(dòng)條、滑動(dòng)痕跡、滑塊、文本等元素，先把html代碼寫出來(lái)，如下所示：

<div class="bar_wrap" id="wrap"><!--外包裹元素-->
 <div class="bar_container"><!--滑動(dòng)條-->
  <div class="bar_into"></div><!--滑動(dòng)痕跡-->
 </div>
 <div class="bar_drag"><!--滑塊-->
  <div class="bar_text"></div><!--文本-->
 </div>
</div>

然后給各元素添加css樣式，完成下圖效果：

接下來(lái)通過(guò)分析功能，一步一步完成js代碼。

1. 獲取滑動(dòng)條各個(gè)元素，代碼如下：

//獲取外包裹元素
 var eBarWrap = document.getElementById('wrap');
 //獲取滑動(dòng)條
 var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
 //獲取滑動(dòng)痕跡元素
 var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
 //獲取滑塊
 var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
 //獲取文本元素
 var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];

2. 獲取滑動(dòng)最大值
因?yàn)榛瑝K只能在滑動(dòng)條內(nèi)滑動(dòng)，所以需要限制最大滑動(dòng)位置。而DOM元素計(jì)算位置是從元素的左側(cè)開(kāi)始，所以最大值應(yīng)該是滑動(dòng)條的寬度-滑塊的寬度，如下所示：

//獲取最大位置
 var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;

3. 在滑塊上綁定鼠標(biāo)按下事件函數(shù)，實(shí)現(xiàn)拖拽滑塊功能，代碼如下：

 //滑塊添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  
 });

3.1 獲取滑塊位置
需要拖動(dòng)滑塊，肯定要先知道滑塊原來(lái)的位置，才能根據(jù)鼠標(biāo)的移動(dòng)來(lái)拖拽滑塊。在滑塊上綁定的事件函數(shù)上有傳入一個(gè)event對(duì)象，這個(gè)event對(duì)象代表當(dāng)前事件的實(shí)例對(duì)象，包含當(dāng)前事件相關(guān)信息。如下所示：

//滑塊添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  //初始化鼠標(biāo)開(kāi)始拖拽的點(diǎn)擊位置
  var nInitX = event.clientX;
  //初始化滑塊位置
  var nInitLeft = this.offsetLeft;
 });

3.2 滑塊跟隨鼠標(biāo)移動(dòng)，修改滑動(dòng)痕跡和文本數(shù)值
操作時(shí)，在滑塊上按下鼠標(biāo)，再移動(dòng)鼠標(biāo)就可以使滑塊跟隨鼠標(biāo)移動(dòng)。但一般移動(dòng)鼠標(biāo)不可能只在滑動(dòng)條上面移動(dòng)，所以需要在頁(yè)面上綁定鼠標(biāo)移動(dòng)事件，如下所示：

//滑塊添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //頁(yè)面綁定鼠標(biāo)移動(dòng)事件
  document.onmousemove = event=>{
   //鼠標(biāo)移動(dòng)時(shí)取消默認(rèn)行為，避免選中其他元素或文字
   event.preventDefault();
   //獲取鼠標(biāo)移動(dòng)后滑塊應(yīng)該移動(dòng)到的位置
   let nX = event.clientX - nInitX + nInitLeft;
   //限制滑塊最大移動(dòng)位置
   if(nX>=nMax){
    nX = nMax;
   }
   //限制滑塊最小移動(dòng)位置
   if(nX<=0){
    nX = 0;
   }
   //修改滑塊位置（因?yàn)橛玫氖羌^函數(shù)，所以this還是指向滑塊）
   this.style.left = nX + 'px';
   //修改滑動(dòng)痕跡寬度
   eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
   //修改文本數(shù)值
   eBarText.innerHTML = Math.ceil(nX/nMax*100)/10;
  };
 });

3.3 釋放鼠標(biāo)時(shí)，固定滑塊位置
當(dāng)釋放鼠標(biāo)的時(shí)候，滑塊固定在當(dāng)前移動(dòng)到的位置，滑動(dòng)痕跡和文本數(shù)值已經(jīng)一起修改。

//滑塊添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //鼠標(biāo)松開(kāi)綁定事件，取消頁(yè)面上所有事件
  document.onmouseup = function(event){
   document.onmousemove = null;
   document.onmouseup = null;
  }
 });

鼠標(biāo)按下事件函數(shù)就完成了?；瑒?dòng)條的樣式都可以通過(guò)css實(shí)現(xiàn)，但默認(rèn)文本數(shù)值是空的，這不太合理，所以需要加多一句代碼，給文本元素默認(rèn)賦值為0，如下所示：

//修改默認(rèn)數(shù)值
 eBarText.innerHTML = 0;

4. 在滑動(dòng)條上添加點(diǎn)擊事件
當(dāng)點(diǎn)擊滑動(dòng)條上除滑塊之外的位置時(shí)，滑塊應(yīng)該直接滑動(dòng)到鼠標(biāo)點(diǎn)擊的位置。需要在滑動(dòng)條上添加點(diǎn)擊事件實(shí)現(xiàn)此功能，代碼如下：

//滑動(dòng)條添加點(diǎn)擊事件
 eBarCon.addEventListener('click',function(event){
  //設(shè)置滑動(dòng)條位置
  var nLeft = this.offsetLeft;
  //獲取有定位的父元素
  var eParent = this.offsetParent;
  //循環(huán)所有有定位的父元素
  while(eParent){
   //添加定位父元素offsetLeft值，用于準(zhǔn)確定位滑動(dòng)條與頁(yè)面左側(cè)的距離 
   nLeft += eParent.offsetLeft;
   //再次獲取父元素外的定位父元素
   eParent = eParent.offsetParent;
  }
  //計(jì)算滑塊位置
  var nX = event.clientX - nLeft;
  //修改滑塊位置
  eBarDrag.style.left = nX +'px';
  //修改滑動(dòng)痕跡寬度
  eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
  //修改文本數(shù)值
  eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
 });

到此這篇關(guān)于原生js拖拽功能制作滑動(dòng)條實(shí)例教程的文章就介紹到這了,更多相關(guān)js拖拽功能制作滑動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: