JavaScript to achieve mouse drag effect

This article shares the specific code of JavaScript to achieve the mouse drag effect for your reference. The specific content is as follows

The effect picture this time is as follows:

I think the difficulty of this experiment is to keep the relative position of the box and the mouse unchanged, and to achieve the dragging effect by pressing and moving the mouse.

How to achieve the drag effect?

We need to use three functions: onmousedown , onmousemove , onmouseup , which represent the mouse being pressed, the mouse being moved, and the mouse being raised, respectively.

In the callback function of the mouse press , we need to get the initial position of the mouse through clientX and clientY , get the initial position of the box through offsetLeft and offsetTop , and then calculate the difference between the initial position of the mouse and the initial position of the box;

In the mouse move callback function, we need to get the current position of the box based on the mouse position and the difference calculated previously, and then change its left and top values. Don't forget to set the position to absolute (because I forgot...)

In the callback function of mouse up , we need to clear the mouse movement and mouse up, by setting onmousemove and onmouseup values to null.

Also pay attention! ! !

The mouse move function and the mouse lift function should be written in the mouse press function, because we want to design the subsequent behavior after the mouse is pressed, and it is very important that:

The mouse down function is div's, the mouse move and mouse up function is document's

Because we don't mean to move the mouse in the div, but to move the entire page

The key points are probably these. Here is the code:

<!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>
        #box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-radius: 14px;
            box-shadow: 2px 2px 6px rgba(0,0,0,.3);

            /* Hey guys, you want to move and change the left without setting the position. . . */
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById("box");
        box.onmousedown=function(event){
            let disx = event.clientX-box.offsetLeft;
            let disy=event.clientY-box.offsetTop;
            //This is not box.onmousemove, it is document.onmousemove
            document.onmousemove=function(event){
                box.style.left=event.clientX-disx+'px';
                box.style.top=event.clientY-disy+'px';
            }

            //To be written in ommousedown document.onmouseup=function(){
                //Set both to null
            document.onmousemove=null;
            document.onmouseup=null;
            return false;
        }
        }
        
    </script>
</body>
</html>

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:

Using javascript to implement mouse drag events
JS implementation of moving sub-windows by dragging the mouse
js implements the method of switching pictures by dragging the mouse
js to achieve mouse drag multiple selection function example
JS mouse drag example analysis
jsMind adjusts the node position by dragging the mouse
js realizes the mouse dragging div to slide left and right
Detailed explanation of JavaScript mouse drag events
js to achieve mouse drag and zoom div example code
JavaScript uses canvas to implement mouse drag function

<<: How to uninstall MySQL cleanly (tested and effective)

>>: CSS realizes the layout method of fixed left and adaptive right

Solve the problem of running jupyter notebook on the server

JavaScript to achieve mouse drag effect

Solve the problem of running jupyter notebook on the server

React Fiber structure creation steps

Detailed explanation of using grep command in Linux

About the problem of writing plugins for mounting DOM in vue3

Zabbix uses PSK shared key to encrypt communication between Server and Agent

Three JavaScript methods to solve the Joseph ring problem

Web project development JS function anti-shake and throttling sample code

CSS to change the size (width, height) of the image when the mouse passes over the image hyperlink

How to access MySql through IP address

Vue simple registration page + send verification code function implementation example

Recommend

15 JavaScript functions worth collecting

Docker executes a command in a container outside the container

How to query date and time in mysql

How to build a SOLO personal blog from scratch using Docker

Tutorial on deploying nginx+uwsgi in Django project under Centos8

MySQL 5.6.22 installation and configuration method graphic tutorial

Experience sharing by a front-end supervisor with 7 years of practical experience

CSS3 realizes the glowing border effect

Troubleshooting process for Docker container suddenly failing to connect after port mapping

How to restore data using binlog in mysql5.7

A brief discussion on HTML ordered lists, unordered lists and definition lists

Set the contenteditable attribute to edit the content of HTML tags (can replace textarea)

Introduction to the use of this in HTML tags

mysql backup script and keep it for 7 days

JS generates unique ID methods: UUID and NanoID