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

javascript mouse dragging icon technology_javascript skills

WBOY
Release: 2016-05-16 18:35:00
Original
1029 people have browsed it

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>

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template