Move an Element to Mouse Position in JavaScript
By Faruque Ahamed MollickAre you ready to play with JavaScript? Because this tutorial is going to be an interesting one who love playing with JavaScript DOM. In this tutorial, I am going to let you know how you can move an element to the mouse position in JavaScript.
I hope you are excited to see how to perform this task.
Let’s see…
First of all, let’s create our HTML element which we are going to move later to the mouse position.
Below is our HTML element:
<div id="myId"></div>
Below are a few lines of CSS code to give it looks like a small red ball:
#myId {
width: 22px;
height: 22px;
border-radius: 50%;
background-color: red;
transition: 0.2s;
}
If you run it on your browser, you will be able to see a small red ball. But nothing will happen now as we still have not added the JavaScript code yet.
After we add our JavaScript code, you can see the small red ball we created on the screen moving with the mouse cursor.
You can notice in our CSS code, that we have added a CSS transition property. This is to make it more attractive. It will add an animation effect to the movement.
Now below is our JavaScript code which is the main part of our tutorial to make it work:
document.onmousemove = function(e) {
var x = e.clientX;
var y = e.clientY;
document.getElementById('myId').style.marginLeft = x+"px";
document.getElementById('myId').style.marginTop = y+"px";
}
In the above JavaScript code, we have used the clientX property to get the position of our element from the left and clientY property to get the position of our element from the top.
The clientX and ClientY property returns the horizontal and vertical position of the mouse pointer when the mouse event is triggered.
After that, we set the DOM CSS marginLeft and marginTop property to our element.
Basically, in this tutorial, we have taken the x and y coordinate position of the mouse cursor and then apply them as the margin to our red ball or our element.
To detect the mouse move, we have used onmousemove Event so that whenever we move our mouse, we get the position of the pointer. Depending on the mouse position, we set the CSS margin to the red ball.
Now the code is ready to test and you can run it on your browser. You can see that if you move your mouse on the page, then the red ball also moves to the mouse position. With the movement of your mouse pointer, the red ball also moves in a nice way.
The complete code in one HTML file
Below is given the complete code inside just one HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#myId {
width: 22px;
height: 22px;
border-radius: 50%;
background-color: red;
transition: 0.2s;
}
</style>
</head>
<body>
<div id="myId"></div>
<script type="text/javascript">
document.onmousemove = function(e) {
var x = e.clientX;
var y = e.clientY;
document.getElementById('myId').style.marginLeft = x+"px";
document.getElementById('myId').style.marginTop = y+"px";
}
</script>
</body>
</html>You can copy the complete code, save it in an HTML file and open it with your preferred browser to test it.
Also, read:
- Calculate the distance between mouse and element in jQuery
- Get the scroll position of a web page in the browser window using JavaScript
So we have successfully been able to move an element to mouse position in JavaScript.
but it has bug:/
when I scroll down,circle element stays up!