Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use JavaScript to achieve mouse drag effect", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to use JavaScript to achieve mouse drag effect"!

The details are as follows

The effect 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 drag effect by pressing and moving the mouse.

How to achieve the effect of drag and drop?

We need to use three functions: onmousedown, onmousemove, and onmouseup, which represent mouse down, mouse movement, and mouse lift, respectively

In the callback function pressed by the mouse, 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 callback function of mouse movement, we need to get the current position of the box according to the mouse position and the difference calculated before, then change its left and top values, and don't forget to set position to absolute.

In the callback function of mouse lift, we need to clear the mouse movement and mouse lift by setting the onmousemove and onMouseup values to null

And pay attention to it!

Both the mouse movement function and the lift function are written in the mouse down function, because we want to design the behavior after the mouse is pressed, and it is important to:

Mouse down function is div, mouse movement and mouse lift are document

Because what we mean is not that the mouse moves in div, but that it moves throughout the page.

That's about the point. Here's the code:

Document # box {width: 100px; height: 100px; background-color: aquamarine; border-radius: 14px; box-shadow: 2px 2px 6px rgba; / * good guys want to move and change left without setting a location. * / position: absolute;} 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 ommousedown _ document.onmouseup=function () {/ / both should be set to null _ document.onmousemove=null; _ document.onmouseup=null; return false }} Thank you for reading. The above is the content of "how to use JavaScript to achieve mouse drag effect". After the study of this article, I believe you have a deeper understanding of how to use JavaScript to achieve mouse drag effect, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.