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


Posted in Javascript onAugust 15, 2019

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

该插件最初的想法来自网上的一篇文章,直达链接://3water.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)移动端加了防止长按弹出提示框的代码

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: -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 更新 优化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[0];
    var that = this;
    var lastX = null; //判断鼠标移动方向,解决向左侧滑动时候的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;
    }
    //获取元素的绝对位置,工具函数
    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>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
Node.js插件安装图文教程
May 06 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 #Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 #Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 #Javascript
js设计模式之单例模式原理与用法详解
Aug 15 #Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 #Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 #Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 #Javascript
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
需要牢记的JavaScript基础知识
2016/09/25 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python yield关键词案例测试
2019/10/15 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
村党支部公开承诺书
2014/05/29 职场文书
党建工作整改措施
2014/10/28 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
毕业实习单位意见
2015/06/04 职场文书