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

A look into tool-based websites: the definition of tool-based websites and typical case analysis (pictures and text)

js to achieve the effect of dragging the slider

A look into tool-based websites: the definition of tool-based websites and typical case analysis (pictures and text)

How to use and limit props in react

Centos7 configuration fastdfs and nginx distributed file storage system implementation process analysis

The new version of Chrome browser settings allows cross-domain implementation

Mysql updates certain fields of another table based on data from one table (sql statement)

Detailed explanation of how to adjust Linux command history

Example of how to reference environment variables in Docker Compose

Detailed explanation of Vue + Axios request interface method and parameter passing method

Detailed explanation of how MySQL solves phantom reads

How to move mysql5.7.19 data storage location in Centos7

Recommend

Detailed explanation of Nginx configuration required for front-end

Sample code of uniapp vue and nvue carousel components

How to check disk usage in Linux

A brief discussion on tags in HTML

Detailed explanation of the application of meta tags in mobile platform development

JavaScript imitates Xiaomi carousel effect

Native JS to achieve draggable login box

About ROS2 installation and docker environment usage

Docker container deployment attempt - multi-container communication (node+mongoDB+nginx)

Design Tips: We think you will like it

Rainbow button style made with CSS3

How to implement vue page jump

Mysql 5.6 "implicit conversion" causes index failure and inaccurate data

How does Vue download non-same-origin files based on URL

How to install PHP7.4 and Nginx on Centos