The example in this article shares with you 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. How to achieve the drag effect by pressing and moving the mouse
?
We need to use three functions: onmousedown , onmousemove , and onmouseup , which respectively represent mouse pressing, mouse moving, and mouse lifting.
In the callback function of mouse pressing , we need to obtain the initial position of the mouse through clientX and clientY , and through offsetLeft and offsetTop gets the initial position of the box, and then calculates the difference between the initial position of the mouse and the initial position of the box;
in the callback function of the mouse movement , we need to get the current position of the box based on the difference between the mouse position and the previously calculated position, and then change Its left and top values, don't forget to set the position to absolute (because I just forgot...)
In the callback function of the mouse lift , we need to clear the mouse movement and mouse lift, by setting onmousemove and onmouseup values to nullAlso
pay attention! ! !
Both the mouse move function and the mouse lift function must be written in the mouse press function, because we need to design the subsequent behavior after the mouse press action, and a very important point is:
the mouse press function is p, and the mouse Moving and mouse raising are in the document
because we don’t mean the mouse moves in p, but moves 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);
/* The good guys want to move and change the left without setting the positioning. . . */
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, but document.onmousemove
document.onmousemove=function(event){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//To be written in omniusedown document.onmouseup=function(){
//Both of these must be set to 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 examples of pictures and texts). For more information, please pay attention to other related articles on the PHP Chinese website!
