该插件最初的想法来自网上的一篇文章，直达链接：https://www.cnblogs.com/libin-1/p/6220056.html

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

上代码：

  <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[];

             var that=this;

             var move = function(e) {

                 var x = e.touches[].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 < ) {

                     minDiv_left = ;

                 }

                 //设置拖动后小方块的left值

                 that.minDiv.style.left = minDiv_left + "px";

                 //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题

                 var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * ;

                 if (percent >  && 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）移动端加了防止长按弹出提示框的代码

5）小滑块的宽度改为动态

改造之后的整体案例，需要指出：笔者主要用在微信端，至于其他浏览器滑块的体验不是很好，还有滑块滑动体验跟小块的尺寸有直接关系。

 <!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: -.5px;

         left: ;

         width: 30px;

         height: 30px;

         background: green;

         cursor: pointer

     }

     .lineDiv .minDiv .vals {

         position: absolute;

         font-size: 20px;

         top: -45px;

         left: -.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"></span>%</h3>

     </center>

     <div id="lineDiv" class="lineDiv">

         <div id="minDiv" class="minDiv">

             <div id="vals" class="vals"></div>

         </div>

     </div>

     <div style="height: 20px;"></div>

     <div id="lineDiv" class="lineDiv">

         <div id="minDiv1" class="minDiv">

             <div id="vals" class="vals"></div>

         </div>

     </div>

     <script>

     //避免默认事件 2018.7.10 更新 优化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; //长线条

         //滑动的数值呈现

         this.vals = this.minDiv.children[];

         var that = this;

         var lastX = null; //判断鼠标移动方向，解决向左侧滑动时候的bug

         var move = function(e) {

             var x = e.touches[].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 < ) {

                 minDiv_left = ;

             }

             //设置拖动后小方块的left值

             that.minDiv.style.left = minDiv_left + "px";

             //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题

             var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * ;

             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;

         }

         //获取元素的绝对位置,工具函数

         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>

 </body>

 </html>

本文结束，2018年6月19日，修改bug

本文结束，2018年7月10日，优化

原生js移动端可拖动进度条插件的更多相关文章

  1. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  2. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  3. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  4. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  5. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  6. [Android] SeekBar---可拖动进度条

    SeekBar---可拖动进度条 ()setMax //设置SeekBar最大数值 ()setProgress //设置SeekBar当前数值 ()setSecondaryProgress//设置Se ...

  7. Android——音乐播放器完善——进度条显示当前播放进度，加可拖动进度条（未待解决完问题）

    效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...

  8. UISlider无法拖动进度条的问题解决

    UISlider无法拖动进度条的问题解决 最近业务中的视频播放使用到了UISlider,但是有一个奇怪的问题,就是在Modar出来的控制器中UISlider是可以正常使用的,但是在Push出来的控制器 ...

  9. 简单的jquery进度条插件LineProgressbar.js，myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

随机推荐

  1. day 10 函数的进阶

    动态传参 (重点)  *    ** 形参  * args在形参位置, *表示不定参数--接受的是位置参数   接受到的位置参数的动态传参:  都是元组 形参的顺序: 位置  *args 默认值  * ...

  2. 报错： Name node is in safe mode

    将本地文件拷贝到hdfs上去,结果上错误:Name node is in safe mode 这是因为在分布式文件系统启动的时候,开始的时候会有安全模式,当分布式文件系统处于安全模式的情况下,文件系统 ...

  3. flask的查询，一对多，多对多

    模型的关联: 一对多 class Role(db.Model): us = db.relationship('User',backref='role',lazy='dynamic') class Us ...

  4. ruby配置镜像源

    1.打开电脑的cmd窗口,输入如下命令即可查看gem镜像: gem sources l 或是直接使用 gem sources 查询结果如下: C:\Users\Administrator>gem ...

  5. Java学习笔记二十五:Java面向对象的三大特性之多态

    Java面向对象的三大特性之多态 一:什么是多态: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 多态性是对象多种表现形式的体现. 现实中,比 ...

  6. %.*lf控制输出长度

    #include<stdio.h> int main(){    int a,b,c;    while(scanf("%d%d%d",&a,&b,&a ...

  7. Java设计模式（11）——结构型模式之享元模式（Flyweight）

    一.概述 概念 避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类). UML简图 单纯享元模式 角色 抽象享元角色(Flyweight):定义享元子类公共接口 具体享元角色(Co ...

  8. spring使用set方法注入的常见类型写法

    首先配置spring的pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...

  9. GIt学习第一天之安装和版本库创建

    搬运自 ‘廖雪峰的官方网站’ 1.git安装 官网下载地址:https://git-scm.com/download/win   百度网盘下载地址:https://pan.baidu.com/s/1k ...

  10. Swift使用AVAudioPlayer来调节游戏的背景音乐大小

    音乐文件的声音大小有时在做为游戏背景音乐时会过大,而如果我们只是简单应用SKAudioNode来加载音乐的话,是无法进行声音大小的调节的,因此我们必须使用更强大的AVAudioPlayer来进行声音大 ...