JavaScript to achieve mouse drag effect

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

Recommend

15 Best Practices for HTML Beginners

Here are 30 best practices for HTML beginners. 1....

MySQL 5.7 decompressed version installation, uninstallation and garbled code problem graphic solution

1. Installation of the decompressed version (1). ...

Use native js to simulate the scrolling effect of live bullet screen

Table of contents 1. Basic principles 2. Specific...

How to write HTML head in mobile device web development

Copy code The code is as follows: <head> &l...

Summary of several commonly used CentOS7 images based on Docker

Table of contents 1 Install Docker 2 Configuring ...

Swiper.js plugin makes it super easy to implement carousel images

Swiper is a sliding special effects plug-in built...

How to use http and WebSocket in CocosCreator

Table of contents 1. HttpGET 2. HTTP POST WebSock...

Solve the problem of Tomcat10 Catalina log garbled characters

Running environment, Idea2020 version, Tomcat10, ...

Web Design Tutorial (7): Improving Web Design Efficiency

<br />Previous article: Web Design Tutorial ...

A record of the pitfalls of the WeChat applet component life cycle

The component lifecycle is usually where our busi...

MySQL 5.7.17 installation and configuration graphic tutorial

The blogger said : I have been writing a series o...

Why Seconds_Behind_Master is still 0 when MySQL synchronization delay occurs

Table of contents Problem Description Principle A...

Use Javascript to develop sliding-nav navigation plug-in with sliding bar effect

Table of contents 1. Introduction 2. Usage 3. Dev...

Windows 10 1903 error 0xc0000135 solution [recommended]

Windows 10 1903 is the latest version of the Wind...

Using zabbix to monitor the ogg process (Windows platform)

This article introduces how to monitor the ogg pr...