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

Let's talk about Vue's mixin and inheritance in detail

js to achieve the effect of dragging the slider

Let's talk about Vue's mixin and inheritance in detail

Vue implements the function of calling the mobile phone camera and album

Commonplace talk about MySQL event scheduler (must read)

Three ways to achieve text flashing effect in CSS3 Example code

Detailed explanation of HTML element height, offsetHeight, clientHeight, scrollTop, etc.

Detailed explanation of Linux text editor Vim

Analysis of the problem of deploying vue project and configuring proxy in Nginx

Solve the problem of regular automatic file deletion by crontab+shell script under Centos7

A brief discussion on the design of Tomcat multi-layer container

MySQL database operation and maintenance data recovery method

Recommend

Summary of methods to prevent users from submitting forms repeatedly

Docker nginx + https subdomain configuration detailed tutorial

Recommend 60 paging cases and good practices

Use docker to deploy tomcat and connect to skywalking

Brief analysis of the introduction and basic usage of Promise

MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure

HTML uses form tags to implement the registration page example code

Websocket+Vuex implements a real-time chat software

CSS to achieve the sticky effect of two balls intersecting sample code

Solution to the problem that order by is not effective in MySQL subquery

Several reasons for not compressing HTML

Implementation steps for building a local web server on Centos8

MySQL constraint types and examples

5 ways to quickly remove the blank space of Inline-Block in HTML

MySQL master-slave replication delay causes and solutions