原生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 相关文章推荐
javascript来定义类的规范小结
Nov 19 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
angularJS中router的使用指南
Feb 09 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
JavaScript严格模式详解
Jan 16 Javascript
js+html制作简单验证码
Feb 16 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 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
用php来检测proxy
2006/10/09 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
Js+XML 操作
2006/09/20 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
基于python的七种经典排序算法(推荐)
2016/12/08 Python
pandas多级分组实现排序的方法
2018/04/20 Python
python3人脸识别的两种方法
2019/04/25 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
文员自我评价怎么写
2013/09/19 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
学习礼仪心得体会
2014/09/01 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
居住证明范文
2015/06/17 职场文书
趣味运动会赞词
2015/07/22 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书