Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解。

效果图如下所示:

拖动前

拖动后

代码引用的css与js都是线上的
将代码全部复制到一个html中可以直接打开,极其简单。
来分析一下代码
底色div上放了一个变色div再放一个提示字的div最后加一个滑块div
给滑块div绑定鼠标移动事件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style scoped>
   .drag {
    border-radius:30px;
    position: relative;
    background-color: #75CDF9;
    width: 300px;
    height: 34px;
    margin-left: 30px;
    margin-top: 100px;
    line-height: 34px;
    text-align: center;
   }
   .handler {
    border-radius:30px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 32px;
    border: 1px solid #ccc;
    cursor: move;
   }
   .handler_bg {
    background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
   }
   .handler_ok_bg {
    background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
   }
   .drag_bg {
    border-radius:30px;
    background-color: #13CE66;
    height: 34px;
    width: 0px;
   }
   .drag_text {
    position: absolute;
    top: 0px;
    width: 300px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <div class="drag" >
    <div class="drag_bg"></div>
    <div class="drag_text">{{confirmWords}}</div>
    <div @mousedown="mousedownFn($event)" class="handler handler_bg"></div>
   </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script>
   var vm = new Vue({
    el: "#app",
    name: '',
    components: {},
    props: {},
    data() {
     return {
      beginClientX: 0,
      /*距离屏幕左端距离*/
      mouseMoveStata: false,
      /*触发拖动状态 判断*/
      maxwidth: 258,
      /*拖动最大宽度,依据滑块宽度算出来的*/
      confirmWords: '拖动滑块验证',
      /*滑块文字*/
      confirmSuccess: false, /*验证成功判断*/
     }
    },
    created() {},
    watch: {
    },
    methods: {
     mousedownFn: function(e) {
      this.mouseMoveStata = true;
      this.beginClientX = e.clientX;
     }, //按下滑块函数
     successFunction() {
      $(".handler").removeClass('handler_bg').addClass('handler_ok_bg');
      this.confirmWords = '验证通过'
      $(".drag").css({
       'color': '#fff'
      });
      $(".drag").css({
       'background-color': '#13CE66'
      });
      $(".handler").css({
       'left': this.maxwidth
      });
      $(".drag_bg").css({
       'width': this.maxwidth
      });
      $('body').unbind('mousemove');
      $('body').unbind('mouseup');
      this.confirmSuccess = true;
     } //验证成功函数
    },
    mounted() {
     $('body').on('mousemove', (e) => {
      //拖动,这里需要用箭头函数,不然this的指向不会是vue对象
      if(this.mouseMoveStata) {
       var width = e.clientX - this.beginClientX;
       if(width > 0 && width <= this.maxwidth) {
        $(".handler").css({
         'left': width
        });
        $(".drag_bg").css({
         'width': width
        });
       } else if(width > this.maxwidth) {
        this.successFunction();
       }
      }
     });
     $('body').on('mouseup', (e) => {
      //鼠标放开
      this.mouseMoveStata = false;
      var width = e.clientX - this.beginClientX;
      if(width < this.maxwidth) {
       $(".handler").css({
        'left': 0
       });
       $(".drag_bg").css({
        'width': 0
       });
      }
     })
    }
   });
  </script>
 </body>
</html>

总结

以上所述是小编给大家介绍的Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2018-08-21

js 鼠标拖动对象 可让任何div实现拖动效果

js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){      var d=document;if(!a)a=window.event;         if(!a.pageX)a.pageX=a.clientX;         if(!a.pageY)a.pageY=a.clientY;      var x=a.pageX,y=a.pageY;      if(o.setCapture)          o.setCapture();

JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

js拖动滑块和点击水波纹效果实例代码

拖动滑块效果: 先看看效果图: <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t

基于JS组件实现拖动滑块验证功能(代码分享)

拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m

js实现兼容PC端和移动端滑块拖动选择数字效果

本文为大家分享了js实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="viewport&qu

原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】

本文实例讲述了原生js实现可兼容PC和移动端的拖动滑块功能.分享给大家供大家参考,具体如下: 废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代PC端的"mouse"事件. 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t

JS响应鼠标点击实现两个滑块区间拖动效果

本文实例讲述了JS实现的两个滑块区间拖动效果代码.分享给大家供大家参考,具体如下: 网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/ 具体代码如下: <!DOCTYPE html> <html> <head>

js实现可拖动DIV的方法

随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如

基于JavaScript实现拖动滑块效果

本文实例为大家分享了js拖动滑块效果的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content=&q

js用拖动滑块来控制图片大小的方法

本文实例讲述了js用拖动滑块来控制图片大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title&g

javascript 事件处理、鼠标拖动效果实现方法详解

先看看要拖动的层(模拟窗口)的效果图吧. 要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动.窗口: 复制代码 代码如下: <div id="win"> <div id="win_header"></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标

最精简的JavaScript实现鼠标拖动效果的方法

相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动:定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

JavaScript 中有关数组对象的方法(详解)

JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

Javascript中的迭代、归并方法详解

迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的函数,如果每项都返回true,那么就会返回true filter() 对数组中的每一个项运用给定的函数,把返回true的项组成一个新数组并返回 forEach() 对数组中的每一项运用给定的函数,但是没有任何的返回值 map() 对数组中的每一个项运用给定的函数并返回每次函数调用的结果组成新的数组

JavaScript中Number对象的toFixed() 方法详解

定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num) 参数 描述 num 必需.规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围.如果省略了该参数,将用 0 代替. 返回值 返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字.如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度.如果 num 大于 l

JavaScript中关键字 in 的使用方法详解

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素 但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以 最好数组使用正常的for循环,对象使用for-in循环 对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q

JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】

本文实例讲述了JavaScript实现的DOM树遍历方法.分享给大家供大家参考,具体如下: 二叉 DOM 树的遍历 function Tree() { var Node = function(key){ this.key = key; this.left = null; this.right = null; } root =null; } 前序遍历 首先访问根结点,然后遍历左子树,最后遍历右子树 Tree.prototype.preOrderTraverse = function(callbac

JS实现滑动门效果的方法详解

本文实例讲述了JS实现滑动门效果的方法.分享给大家供大家参考,具体如下: 描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌,效果图如下: 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未显露的部分) 3.绑定鼠标滑过事件 window.onload=function(){ var box=document.getElementById("box"); var img=box.getEl

原生javascript制作的拼图游戏实现方法详解

本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置  计算背景图位置 //1.让所有的li(在ul里)可以拖拽 //根据鼠标的位置,计算目标li的序号 //根据行号和列号计算下标 //行号*3+列号 //2.归位 此处没有背景图  请自行添加 css样式 <!DOCTYPE html> <html> <head> <meta charset=&q