Move an Element at Mouse Click Position using jQuery

Let us assume, you have a DIV element on your web page and you want to show this element at the mouse click position. How do you do this? I am sharing a simple jQuery code here that shows how easily and efficiently you can move an element precisely at the mouse click position.

Move DIV at Mouse Location on Click Event

In this example, I am using the jQuery .click() function to move the <div> element at the mouse click location anywhere on the web page.

<html>
<head>
    <title>Move DIV to Mouse Click Position using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
    <p>
        Click anywhere on the page!
    </p>

    <div id="divContainer"
        style="width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 50%;
            background-color: green;
            display: none;">
    </div>
</body>
<script>
    $(document).ready(function () {
        $('body').click(function (e) {
            $("#divContainer")
            	.css({
            	    position: 'absolute',
            	    left: e.pageX,
            	    top: e.pageY,
            	    display: 'block'
            	})
                .hide('explode', { pieces: 150 }, 700); 	// Explode effect using jQuery.
        });
    });
</script>
</html>

Try it

The trick or should I say, the method, is simple. I am using jQuery .css() method in my code, to assign a new location to the <div> element. The method has few values (or properties) like, position, left, top and display (optional).

I have set the position as absolute. The $('body').click() function has a parameter e (or the event). Therefore, when you click (anywhere) on your web page, it returns all the events associated with it. You can check the event list in your browsers console window.

$('body').click(function (e) {
    console.log(e);
});

In the list, you will find pageX and pageX properties. Using these, I am reassigning the left and top properties of the <div> element.

.css({
    position: 'absolute', 
    left: e.pageX,
    top: e.pageY,
    display: 'block'
})

Follow Mouse Cursor and Position the DIV using jQuery

How about following the cursor, where ever it moves on your web page. Now, let’s make our <div> element follow the mouse cursor. The code is same as the above example. Except, I am going to write the code inside the $(body) .mousemove() function.

Note: Although, the title of this post says, Mouse Click, this is a just another example, which I thought would be useful for a beginner.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <p>Move the cursor on this section of the page! The DIV element will follow the cursor.</p>

    <div id="divContainer"
        style="width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 50%;
        text-align: center;
        background-color: yellow;
        display: none;">
    </div>
</body>
<script>
    $(document).ready(function () {
        $('body').mousemove(function (e) {
            $("#divContainer")
            	.css({
            	    position: 'absolute',
            	    left: e.pageX,
            	    top: e.pageY,
            	    display: 'block'
            	})
                .html('x: ' + e.pageX + ', y: ' + e.pageY);
        });
    });
</script>
</html>

Try it

Hope you liked the examples. These are some fun codes using jQuery and a little bit of CSS. However, I am sure you can make the codes more useful. Thanks for reading🙂.

← PreviousNext →