原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到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拖拽功能制作滑动条实例教程的更多相关文章
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- 关于js拖拽功能,拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- html5原生js拖拽上传(golang版)
一次只能传一个文件,需在main.go同级目录中建一个upload文件夹 main.go package main import ( "fmt" "io" &q ...
- 原生js拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js使用面向对象的方法开发选项卡实例教程
本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
随机推荐
- java:原子类的CAS
当一个处理器想要更新某个变量的值时,向总线发出LOCK#信号,此时其他处理器的对该变量的操作请求将被阻塞,发出锁定信号的处理器将独占共享内存,于是更新就是原子性的了. 1.compareAndSet- ...
- go语言中运算符
Go语言学习笔记(运算符)-day01 go语言中与其他语言一样,存在多种运算符,下表列出了go语言中的运算符类型 算数运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 算数运算符 运算符 描述 ...
- 第9章 集合处理(数组、Map、Set)
目录 1. 数组 1.1 创建数组 1.2 在数组两端添加删除元素 1.3 在数组任意位置添加.删除元素 delete删除数组元素无效 使用splice方法增.删.改元素 1.4 数组的常用操作 数组 ...
- Angular入门到精通系列教程(7)- 组件(@Component)基本知识
1. 概述 2. 创建Component 组件模板 视图封装模式 特殊的选择器 :host inline-styles 3. 总结 环境: Angular CLI: 11.0.6 Angular: 1 ...
- Linux下的screen和作业任务管理
一.screen 首先介绍下screen,screen是Linux下的一个任务容器,开启了之后就可以让任务在后台执行而不会被网络中断或者是终端退出而影响到. 在Linux中有一些耗时比较久的操作(例如 ...
- 每日CSS_滚动页面动画效果
每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...
- Goland 设置代码格式化
前言 之前一直喜欢 VsCode 的代码自动格式化和其他的一些功能 今天了解到原来 Goland 也有这些功能, 想想也对, 毕竟这么大 正文 Goland设置代码格式化 进入设置,按需选择要使用的, ...
- 为什么.NET Standard 仍然有意义?
.NET Standard 是.NET 官方的API规范,可在许多.NET环境中使用.之所以存在,面向.NET Standard 2.0的库提供了最大可能的覆盖范围,并启用了几乎所有现代的.NET功能 ...
- 关联实现上-jsonpath取值
举例子: demo01.py import jsonimport requestsimport jsonpathsession = requests.session()get_param_dict={ ...
- ubuntu 上搭建 go的开发环境 vscode
原文链接: https://astaxie.gitbooks.io/build-web-application-with-golang/zh/01.4.html 原本我是在windows下进行go的环 ...