HomeОбразованиеRelated VideosMore From: Kirupa Chinnathambi

Move Element to Mouse Click Position

288 ratings | 24592 views
Master the handful of tricks you need to get an element to smoothly move to the exact position of your mouse click.
Html code for embedding videos on your blog
Text Comments (37)
Hello Trend (1 month ago)
Can you pls upload this code to your site or if you have is there a link? ps. Just bought your javascript book....can't wait to learn.
Simen Henriksen (1 month ago)
Thank you for this :)
Jorge D. Lopez (4 months ago)
link to code?
deodatus fink (5 months ago)
Useful - but where is a link to the demo? Anyhow, thanks.
Kirupa Chinnathambi (5 months ago)
deodatus fink Here is the example: https://www.kirupa.com/snippets/move_element_to_click_position.htm :-)
vivek patil (6 months ago)
fake image in background :-D
Jojo Zak (7 months ago)
Hi, thanks a lot for a great tutorial. If I want the opposite to happen, as in the circle will move away from the place I clicked on, how can I do that?
Kirupa Chinnathambi (7 months ago)
Explaining that as a comment here will be tough. Can you please post your question on the forums at https://forum.kirupa.com? Thanks!
Kristopher Driver (7 months ago)
@4:20 - "get click position function, e for the _____ argument..." can you please comment on why the event handler doesn't pass anything into the function but the function calls for an argument to be passed into it? It would be much easier to remember if you explained how the code runs. Thanks for the video! much appreciated
Kirupa Chinnathambi (7 months ago)
Hi Kristopher! The event arg is something automatically passed in by the eventing system in JavaScript. When you create an addEventListener call, behind the scenes there is an arrangement where the event handler you specify will receive an event argument object for the type of event the listener is dealing with, like Touch, Keyboard, etc. Check out the section "Event Arguments and the Event Type" here: https://www.kirupa.com/html5/javascript_events.htm This should give you some additional background into how this all works.
Justin McLaren (7 months ago)
Great apartment haha
but u get a head start :(
Amine Lagab (9 months ago)
you need more views !! this video is gold , keep up the good work
Sohil Shaikh (1 year ago)
thanks for explaining how to deal with offsets of all elements. awesome work!
kiran thakur (1 year ago)
alert("you are awesome!!"); alert("Subscribed");
Alex Booster (1 year ago)
Web page mentioned in the video: Getting the Mouse Click Position https://www.kirupa.com/html5/getting_mouse_click_position.htm
PANKAJ TAMBE (1 year ago)
Raju Ghosh (1 year ago)
sir there is one website whose css transition i want to learn can you please help me with that
Kirupa Chinnathambi (1 year ago)
The easiest way is to post your question on the forums: https://forum.kirupa.com :)
Jason Reynolds (1 year ago)
The only video i found about this!, been searching for 3 days now, Wondering if i can pick your brain on a project? Need a little assistance with...
Kirupa Chinnathambi (1 year ago)
I think we are discussing this on the forums already :P
oba mo (1 year ago)
If you could make a video about positions plz i got no idea about the different between offset scroll height doc or height windows ....etc
Rinku Creative (1 year ago)
It does not work for me :O i have no errors or anything, am i missing something?
Rinku Creative (1 year ago)
solved it, typed a o instead of 0 haha
Vuong Phan The (1 year ago)
What IDE you used?
Kirupa Chinnathambi (1 year ago)
Atom! You can see a video I posted that describes the packages I use as part of it :-)
Riddick Games (2 years ago)
Just wanted to say thanks man. Will be buying all your books soon as well. I'm starting to really get js on my own. But your videos are truly solidifying and clearing up lingering questions that have been on my mind. Thanks for the excellent video content. Keep it up.
Kirupa Chinnathambi (2 years ago)
Thanks for the nice comment! Glad you liked the content and found it helpful :-)
Spike Arts With Sathak (2 years ago)
How to move a square component in a canvas using keyboard..?
3m1L (2 years ago)
document.getElementById > querySelector, btw u can use translate(x,y) instead 3d
TechStacker (2 years ago)
+Kirupa Chinnathambi I think he's referring to the fact that getElementById is a lot faster than querySelector. https://jsperf.com/queryselectorall-vs-getelementbyid/35 :-) You're a great teacher btw, I really enjoy your videos!
Kirupa Chinnathambi (2 years ago)
Translate3d for DOM elements adds hardware acceleration. Regular translate doesn't - unless that has changed recently. Regarding getElementByID vs. querySelector, why do you prefer it? :-)
creative planet (2 years ago)
Andrew Kramer of Web dev !!! :v :D !!!
Zlatko Gavric (2 years ago)
Keep filming. You are great.
Kirupa Chinnathambi (2 years ago)
+Zlatko Gavric Thanks for the nice comment :-)
kamaboko1 (2 years ago)
Great tutorial. On a side note, seeing that you do these tutorials in one take without editing is impressive.
Kirupa Chinnathambi (2 years ago)
+kamaboko1 I wish I could say that this video was done in one take :P If you go to the 1:32 second mark, I ran into some issues and had to do a retake. The easiest way to know whether I had to take multiple takes is whether my video in the bottom-right corner fades out and fades in while the code editor is displayed. The other way is to notice the clock in the top-right corner. If the time elapsed on the clock is much greater than the video length, those missing minutes were involved with fixing some bug in the code, or taking a few moments to figure out a better way to explain something, or just taking a break because I got annoyed at how terrible that particular sequence was going haha.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.