js實(shí)現(xiàn)拖動(dòng)滑塊效果

更新時(shí)間：2021年09月28日 09:26:46 作者：新時(shí)代農(nóng)民工Top

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

本文實(shí)例為大家分享了js如何拖動(dòng)滑塊的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)拖動(dòng)滑塊，先分析，滑塊可以拖動(dòng)應(yīng)該改變滑塊在頁(yè)面中的坐標(biāo)，那就采用定位拿到元素的 top 和 left 對(duì)它們進(jìn)行賦值，接下來(lái)就是準(zhǔn)備事件，既然是鼠標(biāo)拖動(dòng)應(yīng)該具備 mousedown，mousemove，mouseup 三種事件，通過(guò) mousedown 鼠標(biāo)按下事件選中滑塊，mousemove 事件拖動(dòng)滑塊，在拖動(dòng)滑塊的時(shí)候獲取鼠標(biāo)在可視窗口的坐標(biāo)賦值給滑塊的 top 和 left

具體代碼實(shí)現(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>

運(yùn)行