js实现拖动滑块效果
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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>
运⾏
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。