js實現(xiàn)拖動滑塊效果

更新時間：2021年09月28日 09:26:46 作者：新時代農民工Top

這篇文章主要為大家詳細介紹了js實現(xiàn)拖動滑塊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js如何拖動滑塊的具體代碼，供大家參考，具體內容如下

實現(xiàn)拖動滑塊，先分析，滑塊可以拖動應該改變滑塊在頁面中的坐標，那就采用定位拿到元素的 top 和 left 對它們進行賦值，接下來就是準備事件，既然是鼠標拖動應該具備 mousedown，mousemove，mouseup 三種事件，通過 mousedown 鼠標按下事件選中滑塊，mousemove 事件拖動滑塊，在拖動滑塊的時候獲取鼠標在可視窗口的坐標賦值給滑塊的 top 和 left

具體代碼實現(xiàn)

<!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>

運行