原生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 效率组装字符串 StringBuffer
Dec 23 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
微信小程序 button样式设置为图片的方法
Jun 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Node.js assert断言原理与用法分析
2019/01/04 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
使用Python pip怎么升级pip
2020/08/11 Python
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
大专生的学习自我评价
2013/12/04 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
邀请函范文
2015/02/02 职场文书
律师函格式范本
2015/05/27 职场文书
就业推荐表院系意见
2015/06/05 职场文书
白银帝国观后感
2015/06/17 职场文书
勤俭节约主题班会
2015/08/13 职场文书
Pytest中conftest.py的用法
2021/06/27 Python