原生js實現(xiàn)的移動端可拖動進度條插件功能詳解

更新時間：2019年08月15日 10:36:54 作者：我站在山頂上

這篇文章主要介紹了原生js實現(xiàn)的移動端可拖動進度條插件功能,結(jié)合實例形式詳細分析了javascript拖動進度條插件的具體定義與使用技巧,需要的朋友可以參考下

本文實例講述了原生js實現(xiàn)的移動端可拖動進度條插件功能。分享給大家供大家參考，具體如下：

該插件最初的想法來自網(wǎng)上的一篇文章，直達鏈接：//www.fzitv.net/article/167717.htm

筆者因為業(yè)務需要尋找到這個插件，然后拿來用之，發(fā)現(xiàn)各種不方便，然后便開始了改造之路。

上代碼：

<script>
    function dragSlide(id) {
      this.minDiv =document.getElementById(id); //小方塊 
      this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方塊的寬度
      this.lineDiv = this.minDiv.parentNode; //長線條
      //滑動的數(shù)值呈現(xiàn)
      this.vals = this.minDiv.children[0];
      var that=this;
      var move = function(e) {
        var x = e.touches[0].pageX;
        var lineDiv_left = that.getPosition(that.lineDiv).left; //長線條的橫坐標
        var minDiv_left = x - lineDiv_left; //小方塊相對于父元素（長線條）的left值
        if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
          minDiv_left = that.lineDiv.offsetWidth - that.width;
        }
        if (minDiv_left <0 ) {
          minDiv_left = 0;
        }
        //設置拖動后小方塊的left值
        that.minDiv.style.left = minDiv_left + "px";
        //percent百分比改為如下所示,解決開始和最后滑動的體驗不好問題
        var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
        if (percent > 0 && percent < 0.5) {
          percent = Math.ceil(percent);
        } else {
          percent = Math.floor(percent);
        }
        that.vals.innerText = percent;
      }
      //獲取元素的絕對位置,工具函數(shù)
      this.getPosition = function(node) {
        var left = node.offsetLeft; //獲取元素相對于其父元素的left值var left
        var top = node.offsetTop;
        current = node.offsetParent; // 取得元素的offsetParent
        　 // 一直循環(huán)直到根元素
        　　
        while (current != null) {　　
          left += current.offsetLeft;　　
          top += current.offsetTop;　　
          current = current.offsetParent;　　
        }
        return {
          "left": left,
          "top": top
        };
      }
      this.minDiv.addEventListener("touchmove", move);
    }
    var drag0 = new dragSlide("minDiv");
    var drag1 = new dragSlide("minDiv1");
    //取消移動端手勢長按彈出提示框的操作
    document.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
</script>

html和css部分沒有改動，而js改動還是很大的，比較原來作者的文章，改動點如下

1）整體上，原來不是插件，改造之后成為一個可以復用的插件，雖然簡單了點

2）只是將其改造為適用于移動端的插件

3）通過對開始滑動和結(jié)束滑動比例的處理，優(yōu)化了開始滑動和結(jié)束滑動的體驗

4）移動端加了防止長按彈出提示框的代碼

5）小滑塊的寬度改為動態(tài)

改造之后的整體案例，需要指出：筆者主要用在微信端，至于其他瀏覽器滑塊的體驗不是很好，還有滑塊滑動體驗跟小塊的尺寸有直接關系。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>鼠標拖動小方塊</title>
  <style type="text/css">
  .lineDiv {
    position: relative;
    height: 5px;
    background: red;
    width: 300px;
    margin: 50px auto;
  }
  .lineDiv .minDiv {
    position: absolute;
    top: -12.5px;
    left: 0;
    width: 30px;
    height: 30px;
    background: green;
    cursor: pointer
  }
  .lineDiv .minDiv .vals {
    position: absolute;
    font-size: 20px;
    top: -45px;
    left: -2.5px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: blue;
  }
  .lineDiv .minDiv .vals:after {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 6px solid blue;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    display: block;
    margin-left: 11px;
  }
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  </style>
</head>
<body>
  <center>
    <h3>用鼠標拖動小方塊<span id="msg">0</span>%</h3>
  </center>
  <div id="lineDiv" class="lineDiv">
    <div id="minDiv" class="minDiv">
      <div id="vals" class="vals">0</div>
    </div>
  </div>
  <div style="height: 20px;"></div>
  <div id="lineDiv" class="lineDiv">
    <div id="minDiv1" class="minDiv">
      <div id="vals" class="vals">0</div>
    </div>
  </div>
  <script>
  //避免默認事件 2018.7.10 更新 優(yōu)化uc瀏覽器左右滑動時候頁面被拖動
  document.addEventListener('touchmove', function(e) {
    e.preventDefault();
  }, { passive: false });
  function dragSlide(id) {
    this.minDiv = document.getElementById(id); //小方塊 
    this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方塊的寬度
    this.lineDiv = this.minDiv.parentNode; //長線條
    //滑動的數(shù)值呈現(xiàn)
    this.vals = this.minDiv.children[0];
    var that = this;
    var lastX = null; //判斷鼠標移動方向，解決向左側(cè)滑動時候的bug
    var move = function(e) {
      var x = e.touches[0].pageX,
        direction = '';
      if (lastX == null) {
        lastX = x;
        return;
      }
      if (x > lastX) {
        direction = 'right';
      } else if (x < lastX) {
        direction = 'left';
      } else {
        direction = '';
      }
      var lineDiv_left = that.getPosition(that.lineDiv).left; //長線條的橫坐標
      var minDiv_left = x - lineDiv_left; //小方塊相對于父元素（長線條）的left值
      if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
        minDiv_left = that.lineDiv.offsetWidth - that.width;
      }
      if (minDiv_left < 0) {
        minDiv_left = 0;
      }
      //設置拖動后小方塊的left值
      that.minDiv.style.left = minDiv_left + "px";
      //percent百分比改為如下所示,解決開始和最后滑動的體驗不好問題
      var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
      if (percent < 0.5 && direction == 'right') {
        percent = Math.ceil(percent);
      } else if (percent > 0.5 && direction == 'right') {
        percent = Math.floor(percent);
      } else {
        percent = Math.ceil(percent);
      }
      that.vals.innerText = percent;
    }
    //獲取元素的絕對位置,工具函數(shù)
    this.getPosition = function(node) {
      var left = node.offsetLeft; //獲取元素相對于其父元素的left值var left
      var top = node.offsetTop;
      current = node.offsetParent; // 取得元素的offsetParent
      　 // 一直循環(huán)直到根元素
      　　
      while (current != null) {　　
        left += current.offsetLeft;　　
        top += current.offsetTop;　　
        current = current.offsetParent;　　
      }
      return {
        "left": left,
        "top": top
      };
    }
    this.minDiv.addEventListener("touchmove", move);
  }
  var drag0 = new dragSlide("minDiv");
  var drag1 = new dragSlide("minDiv1");
  //取消移動端手勢長按彈出提示框的操作
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
  });
  </script>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: