About

Labels

slider

Recent

Navigation

How to make element stick with mouse pointer even while moving using jQuery?

Stick element to mouse pointer

jQuery the most popular Javascript framework today, it is easy to learn and easy to implement. It also create ease to access many function in much minimized way. So in this tutorial I'm going to hands on with a very useful function of jQuery that is .mousemove(). Have a look:
jQuery have .mousemove() function, it is defined as an function performed when mouse pointer moves (even a single pixel). So how can you make it work?

The function will be triggered when ever the mouse will move on the selected elements.
$(selector).mousemove(function(argument){
// function
});
If you will put body as selector then function will be triggered whenever the page will move on web page.

But how to stick any element to pointer using this function

Well, the argument you will pass will have the data related to the current position of mouse pointer. So you will make the element (you want to stick) at position absolute and their left and top values can be obtain from the argument passed. To retrieve them use argument.pageX and argument.pageY to get X and Y axis values. Like this:

See the Pen BgtHn by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
Share
Banner

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: