js拖动滑块效果 js实现拖动滑块效果

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

js拖动滑块效果 js实现拖动滑块效果

新时代农民工Top   2021-09-28 我要评论
想了解js实现拖动滑块效果的相关内容吗,新时代农民工Top在本文为您仔细讲解js拖动滑块效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>

运行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们