原生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 相关文章推荐
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
js中开关变量使用实例
Feb 24 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
thinkphp中memcache的用法实例
2014/11/29 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php文件操作相关类实例
2015/06/18 PHP
orm获取关联表里的属性值
2016/04/17 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
JSON取值前判断
2014/12/23 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
python文件名和文件路径操作实例
2017/09/29 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Django实现单用户登录的方法示例
2019/03/28 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
产品质量承诺范本
2014/03/31 职场文书
安全教育第一课观后感
2015/06/17 职场文书
Python竟然能剪辑视频
2021/05/25 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python