js to achieve the effect of dragging the slider

This article shares the specific code of how to drag the slider in js for your reference. The specific content is as follows

To realize dragging the slider, first analyze that the slider can be dragged, so the coordinates of the slider in the page should be changed. Then use positioning to get the top and left of the element and assign them values. The next step is to prepare events. Since it is mouse dragging, there should be three events: mousedown, mousemove, and mouseup. The slider is selected through the mousedown event, and the slider is dragged through the mousemove event. When dragging the slider, the coordinates of the mouse in the visible window are obtained and assigned to the top and left of the slider.

Specific code implementation

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

run

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript implements the drag slider puzzle verification function (html5, canvas)
js drag the slider and click the water ripple effect example code
Vue implements the drag slider verification function (only css+js without background verification steps)
Implementing the drag slider effect based on JavaScript
Implementing the drag slider verification function based on JS components (code sharing)
js method of controlling the image size by dragging the slider
Native JS encapsulation drag verification slider implementation code example
js realizes the slider drag selection digital effect compatible with PC and mobile terminals
JS responds to mouse clicks to achieve the drag effect between two sliders

<<: Docker meets Intellij IDEA, Java development improves productivity tenfold

>>: Differences between MySQL CHAR and VARCHAR when storing and reading

Several methods of deploying multiple front-end projects with nginx

js to achieve the effect of dragging the slider

Several methods of deploying multiple front-end projects with nginx

MySQL database monitoring software lepus usage problems and solutions

Example of implementing QR code scanning effects with CSS3

Play mp3 or flash player code on the web page

Detailed explanation of the misunderstanding between MySQL and Oracle

docker-maven-plugin packages the image and uploads it to a private warehouse

Examples of using MySQL covering indexes

Solution to the problem of large font size on iPhone devices in wap pages

Ajax jquery realizes the refresh effect of a div on the page

Two ways to manage volumes in Docker

Recommend

In-depth analysis of MySQL from deleting the database to running away_Advanced (I) - Data Integrity

Is your website suitable for IE8?

Use three.js to achieve cool acid style 3D page effects

How to implement a multi-terminal bridging platform based on websocket in JS

Some experience sharing on enabling HTTPS

How to enable the slow query log function in MySQL

A brief analysis of the problem of Mysql 8.0 version driving getTables to return all database tables

How to switch directories efficiently in Linux

Summary of MySQL's commonly used database and table sharding solutions

A brief discussion on front-end production: Is IE6 still necessary for compatibility?

Tips for making web table frames

Docker container connection implementation steps analysis

A brief analysis of how to use border and display attributes in CSS

How to install openjdk in docker and run the jar package

Analysis of the implementation process of Nginx high availability solution in production environment