Home >Web Front-end >JS Tutorial >js to simulate mouse drag events (with picture and text examples)

js to simulate mouse drag events (with picture and text examples)

藏色散人forward: 2022-08-07 10:13:503840browse

The example in this article shares the specific code for realizing the mouse drag effect in JavaScript for your reference. The specific content is as follows

The rendering 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 achieve the dragging effect by pressing and moving the mouse

How to achieve it What about the effect of dragging?

We need to use three functions: onmousedown, onmousemove, onmouseup, which respectively represent mouse press, mouse movement, Mouse raised

In the callback function of mouse pressed, we need to get the mouse through clientX and clientY The initial position of the box is obtained through offsetLeft and offsetTop, and then the difference between the initial position of the mouse and the initial position of the box is calculated;

is in Mouse movementIn the callback function, we need to get the current position of the box based on the difference between the mouse position and the previously calculated value, and then change its left and top values. Don’t forget to set position to absolute (Because I forgot...)

In the callback function of mousemove, we need to clear the mouse movement and mouse lift by changing onmousemove And onmouseup value can be set to null

Alsopay attention! ! !

Both the mouse moving function and the lifting function must be written in the mouse pressing function, because we need to design the subsequent behavior after the mouse pressing action, and is very important One point is:

The mouse press function is p, and the mouse movement and mouse lift are document

Because we do not mean that the mouse is on p Instead of moving in the entire page

The key points are probably these, the following is the code:

<!DOCTYPE html>
<html>
<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);

            /* 好家伙 都没设置定位  就想移动 改变left。。。 */
            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;
            //此处不是box.onmousemove，是document.onmousemove
            document.onmousemove=function(event){
                box.style.left=event.clientX-disx+&#39;px&#39;;
                box.style.top=event.clientY-disy+&#39;px&#39;;
            }

            //要写在ommousedown里面
            document.onmouseup=function(){
                //这俩都要置为null
            document.onmousemove=null;
            document.onmouseup=null;
            return false;
        }
        }
        
    </script>
</body>
</html>

Related recommendations: [JavaScript Video Tutorial]

The above is the detailed content of js to simulate mouse drag events (with picture and text examples). For more information, please follow other related articles on the PHP Chinese website!

JavaScript NULL 回调函数 JS 事件 position

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Two ways to implement images that follow the mouse movement using jsNext article：Two ways to implement images that follow the mouse movement using js

See more

js to simulate mouse drag events (with picture and text examples)

Related articles