原生js实现的移动端可拖动进度条插件功能详解

本文实例讲述了原生js实现的移动端可拖动进度条插件功能。分享给大家供大家参考，具体如下：

该插件最初的想法来自网上的一篇文章，直达链接：//www.Vevb.com/article/167717.htm

笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。

上代码：

<script>    function dragSlide(id) {      this.minDiv =document.getElementById(id); //小方块       this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度      this.lineDiv = this.minDiv.parentNode; //长线条      //滑动的数值呈现      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;      }      //获取元素的绝对位置,工具函数      this.getPosition = function(node) {        var left = node.offsetLeft; //获取元素相对于其父元素的left值var left        var top = node.offsetTop;        current = node.offsetParent; // 取得元素的offsetParent        　 // 一直循环直到根元素        　　        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）通过对开始滑动和结束滑动比例的处理，优化了开始滑动和结束滑动的体验

4）移动端加了防止长按弹出提示框的代码