这篇文章将为大家详细讲解有关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>运行
关于“js如何实现拖动滑块效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
