原生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 相关文章推荐
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
vue中使用rem布局代码详解
Oct 30 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实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python发送邮件实例分享
2017/07/28 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python3实现逐字输出的方法
2019/01/23 Python
详解Python 函数如何重载?
2019/04/23 Python
Python使用贪婪算法解决问题
2019/10/22 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Tensorflow 实现释放内存
2020/02/03 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
保研推荐信
2014/05/09 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书