Post
Ask Question

Move Elements on Mouse Click Using jQuery

Introduction
 
Hi, how are you today? Today we will see how to move an element when the user clicks the mouse. The element is moved to the position the mouse is clicked. This is a simple demo for that. I hope you will enjoy it.
 
Using the code
 
To work with this demo, we need to load the jQuery file first.
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  
Need some elements, right?
  1. <b>Where ever you go, I am there</b>  
  2.    <p id="go">  
  3.        <img src="http://sibeeshpassion.com/Content/Images/sibi.jpg" alt="www.sibeeshpassion.com" />  
  4.    </p>  
We are loading an image to a p tag.
 
Now we will style those elements.
  1. #go {  
  2.            position: absolute;  
  3.            background-color: blue;  
  4.            color: #fff;  
  5.            padding: 10px;  
  6.            border: 1px solid #ccc;  
  7.            border-radius: 5px;  
  8.            width: 100px;  
  9.        }  
So shall we go and write the jQuery code now?
  1. $(document).ready(function () {  
  2.      var XPosition = 0;  
  3.      var YPosition = 0;  
  4.      var $go = $("#go");  
  5.      $(document).click(function (e) {  
  6.          XPosition = e.pageX;  
  7.          YPosition = e.pageY;  
  8.          $go.stop().animate({ top: YPosition, left: XPosition });  
  9.      });  
  10. });  
We are taking the element "go" into a script variable, then we will get the click positions first whenever the user clicks anywhere in the window. 
  1. var $go = $("#go");    
  1. XPosition = e.pageX;    
  2. YPosition = e.pageY;    
Now we will assign these positions to the element "go".
  1. $go.stop().animate({ top: YPosition, left: XPosition });    
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Move elements on click demo - Sibeesh Passion</title>  
  5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  
  6.     <style>  
  7.         #go {  
  8.             position: absolute;  
  9.             background-color: blue;  
  10.             color: #fff;  
  11.             padding: 10px;  
  12.             border: 1px solid #ccc;  
  13.             border-radius: 5px;  
  14.             width: 100px;  
  15.         }  
  16.     </style>  
  17.     <script>  
  18.         $(document).ready(function () {  
  19.             var XPosition = 0;  
  20.             var YPosition = 0;  
  21.             var $go = $("#go");  
  22.             $(document).click(function (e) {  
  23.                 XPosition = e.pageX;  
  24.                 YPosition = e.pageY;  
  25.                 $go.stop().animate({ top: YPosition, left: XPosition });  
  26.             });  
  27.         });  
  28.     </script>  
  29. </head>  
  30. <body>  
  31.     <b>Where ever you go, I am there</b>  
  32.     <p id="go">  
  33.         <img src="http://sibeeshpassion.com/Content/Images/sibi.jpg" alt="www.sibeeshpassion.com" />  
  34.     </p>  
  35. </body>  
  36. </html>  
That is all, so shall we see the output now?
 
 
 
 
 
Conclusion
 
I hope you liked this article, please share me your suggestions. Thanks in advance.
 
Kindest Regards,
Sibeesh Venu 


Similar Articles