Blogger Ever

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

Stick any container or element on mouse pointer on any event using jQuery. It is very easy to make because of .mousemove() function of 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.
// 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.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.