HTML JavaScript
拖拽属于前端常见的功能，很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素。
html代码如下所示：

  1. <div class="bar_wrap" id="wrap"><!--外包裹元素-->
  2.   <div class="bar_container"><!--滑动条-->
  3.     <div class="bar_into"></div><!--滑动痕迹-->
  4.   </div>
  5.   <div class="bar_drag"><!--滑块-->
  6.     <div class="bar_text"></div><!--文本-->
  7.   </div>
  8. </div>

接下来通过分析功能，一步一步完成js代码。

1、 获取滑动条各个元素

代码如下：

  1. //获取外包裹元素
  2. var eBarWrap = document.getElementById('wrap');
  3. //获取滑动条
  4. var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
  5. //获取滑动痕迹元素
  6. var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
  7. //获取滑块
  8. var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
  9. //获取文本元素
  10. var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];

2、获取滑动最大值

因为滑块只能在滑动条内滑动，所以需要限制最大滑动位置。而DOM元素计算位置是从元素的左侧开始，所以最大值应该是 滑动条的宽度-滑块 的宽度，如下所示：

  1. //获取最大位置  
  2. var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;<span ,="" "helvetica="" neue",="" "pingfang="" sc",="" "hiragino="" sans="" gb",="" "microsoft="" yahei",="" sans-serif;"="" style="font-family: Helvetica, Arial, "\\5FAE软雅黑";">

3、在滑块上绑定鼠标按下事件函数，实现拖拽滑块功能

代码如下：

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

3.1 获取滑块位置

需要拖动滑块，肯定要先知道滑块原来的位置，才能根据鼠标的移动来拖拽滑块。在滑块上绑定的事件函数上有传入一个event对象，这个event对象代表当前事件的实例对象，包含当前事件相关信息。如下所示：

  1. //滑块添加拖拽事件
  2. eBarDrag.addEventListener('mousedown',function(event){
  3.   //初始化鼠标开始拖拽的点击位置
  4.   var nInitX = event.clientX;
  5.   //初始化滑块位置
  6.   var nInitLeft = this.offsetLeft;
  7. });

3.2 滑块跟随鼠标移动，修改滑动痕迹和文本数值

操作时，在滑块上按下鼠标，再移动鼠标就可以使滑块跟随鼠标移动。但一般移动鼠标不可能只在滑动条上面移动，所以需要在页面上绑定鼠标移动事件，如下所示：

  1. //滑块添加拖拽事件
  2. eBarDrag.addEventListener('mousedown',function(event){
  3.   /*...*/
  5.   //页面绑定鼠标移动事件
  6.   document.onmousemove = event=>{
  7.     //鼠标移动时取消默认行为，避免选中其他元素或文字
  8.     event.preventDefault();
  9.     //获取鼠标移动后滑块应该移动到的位置
  10.     let nX = event.clientX - nInitX + nInitLeft;
  11.     //限制滑块最大移动位置
  12.     if(nX>=nMax){
  13.       nX = nMax;
  14.     }
  15.     //限制滑块最小移动位置
  16.     if(nX<=0){
  17.       nX = 0;
  18.     }
  19.     //修改滑块位置（因为用的是箭头函数，所以this还是指向滑块）
  20.     this.style.left = nX + 'px';
  21.     //修改滑动痕迹宽度
  22.     eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
  23.     //修改文本数值
  24.     eBarText.innerhtml = Math.ceil(nX/nMax*100)/10;
  25.   };
  26. });

3.3 释放鼠标时，固定滑块位置

当释放鼠标的时候，滑块固定在当前移动到的位置，滑动痕迹和文本数值已经一起修改。

  1. //滑块添加拖拽事件
  2. eBarDrag.addEventListener('mousedown',function(event){
  3.   /*...*/
  5.   //鼠标松开绑定事件，取消页面上所有事件
  6.   document.onmouseup = function(event){
  7.     document.onmousemove = null;
  8.     document.onmouseup = null;
  9.   }
  10. });

鼠标按下事件函数就完成了。滑动条的样式都可以通过css实现，但默认文本数值是空的，这不太合理，所以需要加多一句代码，给文本元素默认赋值为0，如下所示：

  1. //修改默认数值  
  2. eBarText.innerHTML = 0;

4、 在滑动条上添加点击事件

当点击滑动条上除滑块之外的位置时，滑块应该直接滑动到鼠标点击的位置。需要在滑动条上添加点击事件实现此功能，代码如下：

  1. //滑动条添加点击事件
  2. eBarCon.addEventListener('click',function(event){
  3.   //设置滑动条位置
  4.   var nLeft = this.offsetLeft;
  5.   //获取有定位的父元素
  6.   var eParent = this.offsetParent;
  7.   //循环所有有定位的父元素
  8.   while(eParent){
  9.     //添加定位父元素offsetLeft值，用于准确定位滑动条与页面左侧的距离 
  10.     nLeft += eParent.offsetLeft;
  11.     //再次获取父元素外的定位父元素
  12.     eParent = eParent.offsetParent;
  13.   }
  14.   //计算滑块位置
  15.   var nX = event.clientX - nLeft;
  16.   //修改滑块位置
  17.   eBarDrag.style.left = nX +'px';
  18.   //修改滑动痕迹宽度
  19.   eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
  20.   //修改文本数值
  21.   eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
  22. });