原生js拖拽功能制作滑动条实例代码


Posted in Javascript onFebruary 05, 2021

拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素,先把html代码写出来,如下所示:

<div class="bar_wrap" id="wrap"><!--外包裹元素-->
 <div class="bar_container"><!--滑动条-->
  <div class="bar_into"></div><!--滑动痕迹-->
 </div>
 <div class="bar_drag"><!--滑块-->
  <div class="bar_text"></div><!--文本-->
 </div>
</div>

然后给各元素添加css样式,完成下图效果:

原生js拖拽功能制作滑动条实例代码

接下来通过分析功能,一步一步完成js代码。

1. 获取滑动条各个元素,代码如下:

//获取外包裹元素
 var eBarWrap = document.getElementById('wrap');
 //获取滑动条
 var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
 //获取滑动痕迹元素
 var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
 //获取滑块
 var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
 //获取文本元素
 var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];

2. 获取滑动最大值
因为滑块只能在滑动条内滑动,所以需要限制最大滑动位置。而DOM元素计算位置是从元素的左侧开始,所以最大值应该是 滑动条的宽度-滑块 的宽度,如下所示:

//获取最大位置
 var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;

3. 在滑块上绑定鼠标按下事件函数,实现拖拽滑块功能,代码如下:

//滑块添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  
 });

3.1 获取滑块位置
需要拖动滑块,肯定要先知道滑块原来的位置,才能根据鼠标的移动来拖拽滑块。在滑块上绑定的事件函数上有传入一个event对象,这个event对象代表当前事件的实例对象,包含当前事件相关信息。如下所示:

//滑块添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  //初始化鼠标开始拖拽的点击位置
  var nInitX = event.clientX;
  //初始化滑块位置
  var nInitLeft = this.offsetLeft;
 });

3.2 滑块跟随鼠标移动,修改滑动痕迹和文本数值
操作时,在滑块上按下鼠标,再移动鼠标就可以使滑块跟随鼠标移动。但一般移动鼠标不可能只在滑动条上面移动,所以需要在页面上绑定鼠标移动事件,如下所示:

//滑块添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //页面绑定鼠标移动事件
  document.onmousemove = event=>{
   //鼠标移动时取消默认行为,避免选中其他元素或文字
   event.preventDefault();
   //获取鼠标移动后滑块应该移动到的位置
   let nX = event.clientX - nInitX + nInitLeft;
   //限制滑块最大移动位置
   if(nX>=nMax){
    nX = nMax;
   }
   //限制滑块最小移动位置
   if(nX<=0){
    nX = 0;
   }
   //修改滑块位置(因为用的是箭头函数,所以this还是指向滑块)
   this.style.left = nX + 'px';
   //修改滑动痕迹宽度
   eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
   //修改文本数值
   eBarText.innerHTML = Math.ceil(nX/nMax*100)/10;
  };
 });

3.3 释放鼠标时,固定滑块位置
当释放鼠标的时候,滑块固定在当前移动到的位置,滑动痕迹和文本数值已经一起修改。

//滑块添加拖拽事件
 eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //鼠标松开绑定事件,取消页面上所有事件
  document.onmouseup = function(event){
   document.onmousemove = null;
   document.onmouseup = null;
  }
 });

鼠标按下事件函数就完成了。滑动条的样式都可以通过css实现,但默认文本数值是空的,这不太合理,所以需要加多一句代码,给文本元素默认赋值为0,如下所示:

//修改默认数值
 eBarText.innerHTML = 0;

4. 在滑动条上添加点击事件
当点击滑动条上除滑块之外的位置时,滑块应该直接滑动到鼠标点击的位置。需要在滑动条上添加点击事件实现此功能,代码如下:

//滑动条添加点击事件
 eBarCon.addEventListener('click',function(event){
  //设置滑动条位置
  var nLeft = this.offsetLeft;
  //获取有定位的父元素
  var eParent = this.offsetParent;
  //循环所有有定位的父元素
  while(eParent){
   //添加定位父元素offsetLeft值,用于准确定位滑动条与页面左侧的距离 
   nLeft += eParent.offsetLeft;
   //再次获取父元素外的定位父元素
   eParent = eParent.offsetParent;
  }
  //计算滑块位置
  var nX = event.clientX - nLeft;
  //修改滑块位置
  eBarDrag.style.left = nX +'px';
  //修改滑动痕迹宽度
  eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
  //修改文本数值
  eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
 });

到此这篇关于原生js拖拽功能制作滑动条实例教程的文章就介绍到这了,更多相关js拖拽功能制作滑动条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
如何在JavaScript中使用localStorage详情
Feb 04 #Javascript
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
详解React中共享组件逻辑的三种方式
Feb 02 #Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 #Javascript
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
You might like
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
js同时按下两个方向键
2007/12/01 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
js编写简易的计算器
2020/07/29 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Python程序退出方式小结
2017/12/09 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python求前n个阶乘的和实例
2020/04/02 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
Python里面如何实现tuple和list的转换
2012/06/13 面试题
施工班组长岗位职责
2014/01/05 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
班级德育工作实施方案
2014/02/21 职场文书
培训通知书模板
2015/04/17 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
同学联谊会邀请函
2019/06/24 职场文书