原生js移动端可拖动进度条插件
Posted 造轮子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js移动端可拖动进度条插件相关的知识，希望对你有一定的参考价值。
该插件最初的想法来自网上的一篇文章，直达链接：https://www.cnblogs.com/libin-1/p/6220056.html
笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。
上代码：
1 <script> 2 function dragSlide(id) { 3 this.minDiv =document.getElementById(id); //小方块 4 5 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度 6 7 this.lineDiv = this.minDiv.parentNode; //长线条 8 9 //滑动的数值呈现 10 this.vals = this.minDiv.children[0]; 11 12 var that=this; 13 var move = function(e) { 14 var x = e.touches[0].pageX; 15 var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标 16 var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 17 if (minDiv_left >= that.lineDiv.offsetWidth - that.width) { 18 minDiv_left = that.lineDiv.offsetWidth - that.width; 19 } 20 if (minDiv_left <0 ) { 21 minDiv_left = 0; 22 } 23 //设置拖动后小方块的left值 24 that.minDiv.style.left = minDiv_left + "px"; 25 //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题 26 var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100; 27 if (percent > 0 && percent < 0.5) { 28 percent = Math.ceil(percent); 29 } else { 30 percent = Math.floor(percent); 31 } 32 that.vals.innerText = percent; 33 } 34 //获取元素的绝对位置,工具函数 35 this.getPosition = function(node) { 36 var left = node.offsetLeft; //获取元素相对于其父元素的left值var left 37 var top = node.offsetTop; 38 current = node.offsetParent; // 取得元素的offsetParent 39 // 一直循环直到根元素 40 41 while (current != null) { 42 left += current.offsetLeft; 43 top += current.offsetTop; 44 current = current.offsetParent; 45 } 46 return { 47 "left": left, 48 "top": top 49 }; 50 } 51 this.minDiv.addEventListener("touchmove", move); 52 } 53 var drag0 = new dragSlide("minDiv"); 54 var drag1 = new dragSlide("minDiv1"); 55 //取消移动端手势长按弹出提示框的操作 56 document.addEventListener(\'contextmenu\', function(e) { 57 e.preventDefault(); 58 }); 59 60 </script>
html和css部分没有改动，而js改动还是很大的，比较原来作者的文章，改动点如下
1）整体上，原来不是插件，改造之后成为一个可以复用的插件，虽然简单了点
2）只是将其改造为适用于移动端的插件
3）通过对开始滑动和结束滑动比例的处理，优化了开始滑动和结束滑动的体验
4）移动端加了防止长按弹出提示框的代码
5）小滑块的宽度改为动态
改造之后的整体案例，需要指出：笔者主要用在微信端，至于其他浏览器滑块的体验不是很好，还有滑块滑动体验跟小块的尺寸有直接关系。
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> 7 <title>鼠标拖动小方块</title> 8 <style type="text/css"> 9 .lineDiv { 10 position: relative; 11 height: 5px; 12 background: red; 13 width: 300px; 14 margin: 50px auto; 15 } 16 17 .lineDiv .minDiv { 18 position: absolute; 19 top: -12.5px; 20 left: 0; 21 width: 30px; 22 height: 30px; 23 background: green; 24 cursor: pointer 25 } 26 27 .lineDiv .minDiv .vals { 28 position: absolute; 29 font-size: 20px; 30 top: -45px; 31 left: -2.5px; 32 width: 35px; 33 height: 35px; 34 line-height: 35px; 35 text-align: center; 36 background: blue; 37 } 38 39 .lineDiv .minDiv .vals:after { 40 content: ""; 41 width: 0px; 42 height: 0px; 43 border-top: 6px solid blue; 44 border-left: 6px solid transparent; 45 border-right: 6px solid transparent; 46 border-bottom: 6px solid transparent; 47 display: block; 48 margin-left: 11px; 49 } 50 51 * { 52 -webkit-user-select: none; 53 -moz-user-select: none; 54 -ms-user-select: none; 55 user-select: none; 56 } 57 </style> 58 </head> 59 60 <body> 61 <center> 62 <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3> 63 </center> 64 <div id="lineDiv" class="lineDiv"> 65 <div id="minDiv" class="minDiv"> 66 <div id="vals" class="vals">0</div> 67 </div> 68 </div> 69 <div style="height: 20px;"></div> 70 <div id="lineDiv" class="lineDiv"> 71 <div id="minDiv1" class="minDiv"> 72 <div id="vals" class="vals">0</div> 73 </div> 74 </div> 75 <script> 76 //避免默认事件 2018.7.10 更新 优化uc浏览器左右滑动时候页面被拖动 77 document.addEventListener(\'touchmove\', function(e) { 78 e.preventDefault(); 79 }, { passive: false }); 80 81 function dragSlide(id) { 82 this.minDiv = document.getElementById(id); //小方块 83 84 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度 85 86 this.lineDiv = this.minDiv.parentNode; //长线条 87 88 //滑动的数值呈现 89 this.vals = this.minDiv.children[0]; 90 91 var that = this; 92 var lastX = null; //判断鼠标移动方向，解决向左侧滑动时候的bug 93 var move = function(e) { 94 var x = e.touches[0].pageX, 95 direction = \'\'; 96 if (lastX == null) { 97 lastX = x; 98 return; 99 } 100 if (x > lastX) { 101 direction = \'right\'; 102 } else if (x < lastX) { 103 direction = \'left\'; 104 } else { 105 direction = \'\'; 106 } 107 108 var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标 109 var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 110 if (minDiv_left >= that.lineDiv.offsetWidth - that.width) { 111 minDiv_left = that.lineDiv.offsetWidth - that.width; 112 } 113 if (minDiv_left < 0) { 114 minDiv_left = 0; 115 } 116 //设置拖动后小方块的left值 117 that.minDiv.style.left = minDiv_left + "px"; 118 //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题 119 var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100; 120 if (percent < 0.5 && direction == \'right\') { 121 percent = Math.ceil(percent); 122 } else if (percent > 0.5 && direction == \'right\') { 123 percent = Math.floor(percent); 124 } else { 125 percent = Math.ceil(percent); 126 } 127 that.vals.innerText = percent; 128 } 129 //获取元素的绝对位置,工具函数 130 this.getPosition = function(node) { 131 var left = node.offsetLeft; //获取元素相对于其父元素的left值var left 132 var top = node.offsetTop; 133 current = node.offsetParent; // 取得元素的offsetParent 134 // 一直循环直到根元素 135 136 while (current != null) { 137 left += current.offsetLeft; 138 top += current.offsetTop; 139 current = current.offsetParent; 140 } 141 return { 142 "left": left, 143 "top": top 144 }; 145 } 146 this.minDiv.addEventListener("touchmove", move); 147 } 148 var drag0 = new dragSlide("minDiv"); 149 var drag1 = new dragSlide("minDiv1"); 150 //取消移动端手势长按弹出提示框的操作 151 document.addEventListener(\'contextmenu\', function(e) { 152 e.preventDefault(); 153 }); 154 </script> 155 </body> 156 157 </html>
本文结束，2018年6月19日，修改bug
本文结束，2018年7月10日，优化
以上是关于原生js移动端可拖动进度条插件的主要内容，如果未能解决你的问题，请参考以下文章
微信小程序（原生）——video视频禁止拖动进度条可全屏观看等视频播放结束事件数据监听显示播放时长固定倍速视频去除黑边等