拖拽属于前端常见的功能,很多效果都会用到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代码。

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拖拽功能制作滑动条实例教程的更多相关文章

  1. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  5. 关于js拖拽功能,拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  6. html5原生js拖拽上传(golang版)

    一次只能传一个文件,需在main.go同级目录中建一个upload文件夹 main.go package main import ( "fmt" "io" &q ...

  7. 原生js拖拽

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 原生js使用面向对象的方法开发选项卡实例教程

    本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...

  9. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

随机推荐

  1. HDFS中大数据常见运维指令总结

    一.查看HDFS下的参数信息 [root@master ~]# hdfs Usage: hdfs [--config confdir] COMMAND where COMMAND is one of: ...

  2. Spark推荐系统实践

    推荐系统是根据用户的行为.兴趣等特征,将用户感兴趣的信息.产品等推荐给用户的系统,它的出现主要是为了解决信息过载和用户无明确需求的问题,根据划分标准的不同,又分很多种类别: 根据目标用户的不同,可划分 ...

  3. Unity优化 1

    浅谈Unity中的GC以及优化(转) Unity 官方文档,正巧在博客园发现了已经有位大神(zblade)把原文翻译出来了,而且质量很高~,译文地址 在这里.下面我就可耻地把译文搬运了过来,作为上面思 ...

  4. 剑指offer 面试题5:替换空格

    题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy. 则经过替换之后的字符串为We%20Are%20Happy. 编程思想 ...

  5. Mac pycharm更换版本后打不开

    1.第一步:先输入:   cd /Applications/PyCharm.app/Contents/MacOS 2.第二步:查看无法打开pycharm的原因,需要输入:c./pycharm 3.第三 ...

  6. linux查看文件夹和磁盘内存及服务器对应的ip

    多进程统计cpu 数目 n_cpu = multiprocessing.cpu_count() print(n_cpu) 查看文件夹占用磁盘空间 du -h --max-depth=1 /path 查 ...

  7. ObjectMapper将josn字符串转化为List

    一.利用ObjectMapper将json字符串转为List Student.java package objectmapper; import java.io.Serializable; publi ...

  8. vue-cli3x4x修改本地端口port

    一.推荐方法 "scripts": { "serve": "vue-cli-service serve --port 3000", &quo ...

  9. Qt Undo Framework

    Qt undo/redo 框架 基于Command设计模式 支持命令压缩和命令合成 提供了与工具包其他部分融合很好的widgets和actions 术语(Terminology) Command - ...

  10. 从synchronized和lock区别入手聊聊java锁机制

    写这篇文章之前,我去百度了一下啥叫锁,百度百科上写道:置于可启闭的器物上,以钥匙或暗码开启.确实我们一般理解的锁就是门锁,密码锁,但是在计算机科学中,锁又是啥,说实话,这个问题我也思考了很久,也没法很 ...