原生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 解析Json字符串的性能比较分析代码
Dec 16 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
JavaScript效率调优经验
2009/06/04 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
解决Layui中layer报错的问题
2019/09/03 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python多继承原理与用法示例
2018/08/23 Python
django 外键model的互相读取方法
2018/12/15 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
八一演出活动方案
2014/02/03 职场文书
小学语文教学反思
2014/02/10 职场文书
《识字五》教学反思
2014/03/01 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2014年药店店长工作总结
2014/11/17 职场文书