原生JavaScript实现拖动校验功能


Posted in Javascript onSeptember 29, 2020

本文实例为大家分享了JavaScript实现拖动校验的具体代码,供大家参考,具体内容如下

思路

1、页面布局采用定位,背景颜色变化bg的宽度为0,其宽度会随着滑块的移动而移动。

页面结构

<!--验证-->
<div class="box">
  <!--滑块-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">请滑动滑块</p>
  <!--背景-->
  <div class="bg"></div>
</div>

页面布局

/* 滑块使用定位,背景没有设置宽度*/
.box {
  width: 250px;
  height: 50px;
  background-color: #ccc;
  position: relative;
  margin: 0 auto;
}
.btn {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  color: #ccc;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 4;
}
.text {
  position: absolute;
  height: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  user-select: none;
}
.bg {
  width: 0;
  height: 50px;
  background-color: #25c20f;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}

2、分析事件—鼠标按下,鼠标移动,鼠标松开

2.1 鼠标按下,获取此时事件的水平距离downX;鼠标移动,获取此时事件的水平距离e.clientX;那么鼠标移动的距离moveX = e.clientX - downX,也就是滑块跟着移动的距离。即btn.style.left = moveX + 'px';同时bg的宽度也就是滑块移动的距离,即bg.style.width = moveX + 'px'

2.2 滑块拉到头了,表示验证成功
什么时候表示滑块滑到头了,也就是moveX等于box的宽度-滑块的宽度。那么文字的改变成“验证成功”。且滑块停留在了最有端。无论鼠标点击还是移动,都不会在影响了。那就是清除事件,清除按钮的鼠标移动和鼠标按下事件btn.onmousemove = null; btn.onmousedown = null;//清除事件
此时验证成功,设立一个标记为表示验证成功flag=true,后续需要用到。

2.3 那么如果我们滑块拉到一半就松开了鼠标,滑块应该回到原始位置。但是如果已经验证成功了,那就不会回到原点。
鼠标松开事件触发,那么鼠标移动已经不能影响滑块了,那么此时需要清除移动事件btn.onmousemove = null;没有验证成功那就回到原点this.style.left = 0; bg.style.width = 0;

页面动作

function selector(name) {
  return document.querySelector(name);
}
var box = selector('.box'),
  btn = selector('.btn'),
  text = selector('.text'),
  bg = selector('.bg'),
  flag = false;
// 鼠标按下,移动,松开
// 按下的距离和移动的距离差就是滑块移动的距离
btn.onmousedown = function (e) {//按钮按下的
  var downX = e.clientX
  btn.onmousemove = function(e){//e 事件的状态
    var moveX = e.clientX - downX;
    if(moveX > 0) {
      this.style.left = moveX + 'px';
      bg.style.width = moveX + 'px'
      // 滑块拉到头了,表示验证成功
      if (moveX >= box.offsetWidth - this.offsetWidth) {
        bg.style.zIndex = 1;// 设置bg的z-index的值是为了处理党滑块经过原始值的时候,bg将文字覆盖了。验证成功后,有让文字显示出来
        text.innerText = '验证成功';
        text.style.color = '#fff';
        flag = true;
        // 此时鼠标移动或者按下,滑块不在跟着移动了
        btn.onmousemove = null;//
        btn.onmousedown = null;//清除事件
      }
    }
  }
}
btn.onmouseup = function () {
  btn.onmousemove = null;
  // 如果验证成功了,那就不会回到原点
  if(flag){
    return ;
  }
  this.style.left = 0;
  bg.style.width = 0;
}

完整可以运行的源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* 滑块使用定位,背景没有设置宽度*/
    .box {
      width: 250px;
      height: 50px;
      background-color: #ccc;
      position: relative;
      margin: 0 auto;
    }
    .btn {
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      color: #ccc;
      background-color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
      z-index: 4;
    }
    .text {
      position: absolute;
      height: 50px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      user-select: none;
    }
    .bg {
      width: 0;
      height: 50px;
      background-color: #25c20f;
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>

<!--验证-->
<div class="box">
  <!--滑块-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">请滑动滑块</p>
  <!--背景-->
  <div class="bg"></div>
</div>

<script>
  function selector(name) {
    return document.querySelector(name);
  }
  var box = selector('.box'),
    btn = selector('.btn'),
    text = selector('.text'),
    bg = selector('.bg'),
    flag = false;
  // 鼠标按下,移动,松开
  // 按下的距离和移动的距离差就是滑块移动的距离
  btn.onmousedown = function (e) {//按钮按下的
    var downX = e.clientX
    btn.onmousemove = function(e){//e 事件的状态
      var moveX = e.clientX - downX;
      if(moveX > 0) {
        this.style.left = moveX + 'px';
        bg.style.width = moveX + 'px'
        // 滑块拉到头了,表示验证成功
        if (moveX >= box.offsetWidth - this.offsetWidth) {
          bg.style.zIndex = 1;// 设置bg的z-index的值是为了处理党滑块经过原始值的时候,bg将文字覆盖了。验证成功后,有让文字显示出来
          text.innerText = '验证成功';
          text.style.color = '#fff';
          flag = true;
          // 此时鼠标移动或者按下,滑块不在跟着移动了
          btn.onmousemove = null;//
          btn.onmousedown = null;//清除事件
        }
      }
    }
  }
  btn.onmouseup = function () {
    btn.onmousemove = null;
    // 如果验证成功了,那就不会回到原点
    if(flag){
      return ;
    }
    this.style.left = 0;
    bg.style.width = 0;
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 #Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 #Javascript
JS中队列和双端队列实现及应用详解
Sep 29 #Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 #Javascript
js实现星星海特效的示例
Sep 28 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
php连接mysql数据库
2017/03/21 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
offsetParent 算法分析
2010/04/05 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python 爬取小说并下载的示例
2020/12/07 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
课程设计心得体会
2013/12/28 职场文书
原材料检验岗位职责
2014/03/15 职场文书
岗位说明书标准范本
2014/07/30 职场文书
学校捐书活动总结
2015/05/08 职场文书