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

In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle

JavaScript to achieve mouse drag effect

In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle

What hidden attributes in the form can be submitted with the form

How to implement import and export mysql database commands under linux

How to install and uninstall open-vswitch in Linux

A brief discussion on Vue3 father-son value transfer

What is ssh port forwarding? What's the use?

How to implement responsiveness in Vue source code learning

Implementation steps for enabling docker remote service link on cloud centos

Detailed explanation of soft links and hard links in Linux

Solution to invalid Nginx cross-domain setting Access-Control-Allow-Origin

Recommend

Use the Linux seq command to generate a sequence of numbers (recommended)

How to implement insert if none and update if yes in MySql

Detailed explanation of how to install MariaDB 10.2.4 on CentOS7

Pure CSS to solve the ceiling and bottom suction in H5 layout implementation steps

Vue.js implements simple timer function

Detailed explanation of script debugging mechanism in bash

vue-amap installation and usage steps

Detailed explanation of the standard MySQL (x64) Windows version installation process

Analysis and solution of Chinese garbled characters in HTML hyperlinks

Detailed explanation of the basic usage of the auxiliary function mapGetters in vuex

How to manually encapsulate paging components in Vue3.0

Detailed explanation of the loop form item example in Vue

In-depth understanding of javascript class array

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

Code comment writing standards during web page production