js实现拖动滑块效果
更新时间：2021年09月28日 09:26:46 作者：新时代农民工Top
这篇文章主要为大家详细介绍了js实现拖动滑块效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js如何拖动滑块的具体代码，供大家参考，具体内容如下
实现拖动滑块，先分析，滑块可以拖动应该改变滑块在页面中的坐标，那就采用定位拿到元素的 top 和 left 对它们进行赋值，接下来就是准备事件，既然是鼠标拖动应该具备 mousedown，mousemove，mouseup 三种事件，通过 mousedown 鼠标按下事件选中滑块，mousemove 事件拖动滑块，在拖动滑块的时候获取鼠标在可视窗口的坐标赋值给滑块的 top 和 left
具体代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 60px;
height: 60px;
background-color: coral;
border-radius: 20%;
position: absolute;
border: 6px solid skyblue;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div')
let x, y
let fn = function (e) {
// console.log('hhhhhhhh')
div.style.left = e.clientX - x + 'px'
div.style.top = e.clientY - y + 'px'
if (e.clientX - x < 30) {
div.style.left = 0
}
if (e.clientY - y < 30) {
div.style.top = 0
}
if (e.clientX - x > document.documentElement.clientWidth - div.offsetWidth - 30) {
div.style.left = document.documentElement.clientWidth - div.offsetWidth + 'px'
}
if (e.clientY - y > document.documentElement.clientHeight - div.offsetHeight - 30) {
div.style.top = document.documentElement.clientHeight - div.offsetHeight + 'px'
}
}
div.addEventListener('mousedown', function (e) {
x = e.offsetX
y = e.offsetY
document.addEventListener('mousemove', fn)
})
div.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', fn)
})
</script>
</body>
</html>
运行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript数组常用操作技巧,以实例形式汇总了针对数组的查找、连接、排序及迭代等各种常见操作技巧,非常具有实用价值,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了JavaScript设计模式之适配器模式，对设计模式不熟悉的同学，可以参考学习一下2021-04-04
js 日期对象的一些方法总结2009-05-05
iframe 很多网站都在用，虽然方便开发与维护（可能同时有几个页面调用同一个 iframe ），不过却存在安全问题2013-07-07
这篇文章主要给大家介绍了关于CORS跨域资源共享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用CORS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
D3.js支持从外部读取数据进行图形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML数据结构，下面这篇文章主要给大家介绍了D3.js中CSV表格文件读取的相关资料，需要的朋友可以参考下。2017-06-06
无刷新上传解析csv文件的实现代码，需要的朋友可以参考下。2010-05-05
这篇文章主要介绍了JS的拖拽属性draggable详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了ES6中定义类和对象的方法,结合实例形式分析了ES6中类的定义、继承、静态方法、静态属性等相关操作技巧,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JS工厂模式开发,结合具体实践案例形式分析了基于javascript工厂模式实现的轮播功能相关操作技巧,需要的朋友可以参考下2019-10-10
最新评论