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

發(fā)布時(shí)間：2021-09-28 10:48:23 來(lái)源：億速云閱讀：150 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)js如何實(shí)現(xiàn)拖動(dòng)滑塊效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體內(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)行

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

關(guān)于“js如何實(shí)現(xiàn)拖動(dòng)滑塊效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽