jsを使用してスライダーをドラッグする効果を実現します

この記事では、jsでスライダーをドラッグする方法の具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

スライダーのドラッグを実現するには、まずスライダーがドラッグできることを分析し、ページ内のスライダーの座標を変更する必要があります。次に、位置指定を使用して要素の上部と左側を取得し、値を割り当てます。次のステップはイベントを準備することです。マウスのドラッグなので、 mousedown、mousemove、mouseup の 3 つのイベントが必要です。mousedownイベントを通じてスライダーが選択され、 mousemoveイベントを通じてスライダーがドラッグされます。スライダーをドラッグすると、表示されているウィンドウ内のマウスの座標が取得され、スライダーの上部と左側に割り当てられます。

具体的なコード実装

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }

        div {
            幅: 60ピクセル;
            高さ: 60px;
            背景色: コーラル;
            境界線の半径: 20%;
            位置: 絶対;
            境界線: 6px 実線スカイブルー;
            左: 0;
            上: 0;
        }
    </スタイル>
</head>

<本文>
    <div></div>
    <スクリプト>
        div = document.querySelector('div') とします。
        x, yとします
        fn = 関数 (e) {
            // コンソール.log('hhhhhhhh')
            div.style.left = e.clientX - x + 'px'
            div.style.top = e.clientY - y + 'px'
            (e.clientX - x < 30) の場合 {
                div.style.left = 0
            }
            (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', 関数(e) {
            x = e.offsetX
            y = e.offsetY
            document.addEventListener('mousemove', fn)
        })
        div.addEventListener('mouseup', 関数() {
            document.removeEventListener('mousemove', fn)
        })
    </スクリプト>
</本文>

</html>

走る