原生JavaScript實現(xiàn)拖拽功能制作滑動條的實例教程

來源 |?http://www.fly63.com/article/detial/10151

拖拽屬于前端常見的功能，很多效果都會用到j(luò)s的拖拽功能?；瑒訔l的核心功能也就是使用js拖拽滑塊來修改位置。

一個完整的滑動條包括 滑動條、滑動痕跡、滑塊、文本 等元素，先把html代碼寫出來。

如下所示：

然后，給各元素添加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、?獲取滑動最大值
因為滑塊只能在滑動條內(nèi)滑動，所以需要限制最大滑動位置。而DOM元素計算位置是從元素的左側(cè)開始，所以最大值應(yīng)該是 滑動條的寬度-滑塊 的寬度，如下所示：

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

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

代碼如下：

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

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

如下所示：

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

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

 //滑塊添加拖拽事件  eBarDrag.addEventListener('mousedown',function(event){    /*...*/
    //頁面綁定鼠標(biāo)移動事件    document.onmousemove = event=>{      //鼠標(biāo)移動時取消默認行為，避免選中其他元素或文字      event.preventDefault();      //獲取鼠標(biāo)移動后滑塊應(yīng)該移動到的位置      let nX = event.clientX - nInitX + nInitLeft;      //限制滑塊最大移動位置      if(nX>=nMax){        nX = nMax;      }      //限制滑塊最小移動位置      if(nX<=0){        nX = 0;      }      //修改滑塊位置（因為用的是箭頭函數(shù)，所以this還是指向滑塊）      this.style.left = nX + 'px';      //修改滑動痕跡寬度      eBarInto.style.width = nX + this.offsetWidth/2 + 'px';      //修改文本數(shù)值      eBarText.innerhtml = Math.ceil(nX/nMax*100)/10;    };  });

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

//滑塊添加拖拽事件  eBarDrag.addEventListener('mousedown',function(event){    /*...*/
    //鼠標(biāo)松開綁定事件，取消頁面上所有事件    document.onmouseup = function(event){      document.onmousemove = null;      document.onmouseup = null;    }  });

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

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

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

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

?

本文完?