原生js拖拽功能制作滑動條實體教程

拖拽屬于前端常見的功能，很多效果都會用到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;

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
  });

標籤：其他

上一篇：Array回圈for、for in、for of、forEach各間優劣

下一篇：HTML 5 詳解之表單的初級驗證