原生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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
vue中activated的用法
Jan 03 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP里的中文变量说明
2011/07/23 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
js实现无缝轮播图
2020/03/09 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python自动化测试实例解析
2014/09/28 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python让函数不返回结果的方法
2020/06/22 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
Linux的主要特性
2016/09/03 面试题
简短证婚人证婚词
2014/01/09 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
党员民主评议个人总结
2014/10/20 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书