Home  >  Article  >  Web Front-end  >  javascript mouse dragging icon technology_javascript skills

javascript mouse dragging icon technology_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:35:001021browse

This example is simply to drag the mouse to wherever it wants to go
Code

Copy code The code is as follows:


< /div>
<script> <br>var bb = document.getElementById("block"); <br>bb.onmousedown = function(){ <br>//Get the current coordinates of the mouse<br>var pageX = event.clientX; <br>var pageY = event.clientY; <br>//Get the coordinates of the block, left border and upper border<br>var offX = parseInt(this.style.left)||0; <br>var offY = parseInt(this.style.top)||0; <br>//Calculate the distance between the mouse coordinates and the block coordinates<br>var offLX = pageX-offX; <br>var offLY = pageY-offY ; <br>if(!document.onmousemove){ <br>document.onmousemove = function(){ <br>bb.style.left=event.clientX-offLX; //Set the X coordinate of block <br>bb. style.top=event.clientY-offLY; //Set the Y coordinate of the block <br>} <br>} <br>} <br>document.onmouseup = function(){document.onmousemove = null;} //Mouse Bounce<br></script>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn