Building draggable Component with React and TypeScript

Hey everyone, in this episode we are going to learn how to build a "draggable" component with React and TypeScript from scratch. This way we avoid using any library providing similar functionality because those libraries usually provide bunch of extra features we don't need and that can be very costly for our project size.
Get the code on Github - github.com/div...
Music - www.epidemicso...

[@DanishTroll87]

Great video, literally what i needed. Half the videos out there either complicate things or don't show a real life test at the end.

[@alext5497]

thank you for doing this without an external lib, i couldnt' even get gpt to do it right.

[@BigBahss]

Thanks for the video. Just wanted to say, the mouseleave event does not fire properly on firefox, but it does on chrome, so on firefox you can just keep dragging the box beyond the edges of the container to where it's completely hidden, and gets lost if you mouseup.

[@adairoreyes1644]

Nice video! , I would love that you'd include some explanations about the math, It was rather hard to catch up at the end

[@diveindev]

Thanks Adario, I appreciate the feedback, will try to make a separate one and dive into nuances.

[@balintbruncsics6396]

Dude, great work! Looking forward to the next video!

[@diveindev]

Thanks a lot! I'm happy that it was useful.

[@muhammadabdullahnabeel6039]

Well coded and great work, however you should also guide about how to keep complete box in the container, as you have observed, sometimes when cursor move near the corners, the box is somewhat hidden.

[@小柴亮威]

Thanks for this great video! I get it how to draggable object!

[@toshitsingh7270]

Thanks a lot, you explained everything perfectly ❤

[@hector4like6gorilla]

thanks man!! you rock!

[@mohammadjavadaghazadehfard7873]

Thanks, It was very cool.🌹 please make more videos like this. Good luck. 🙏

[@diveindev]

Happy to hear that it helped 😀

[@sangyoon9012]

fantastic!!!

[@thuannguyenvan5710]

Nice video . Now I just want it to move along the Y axis, what should I do?

[@Nagship]

Can I apply position fixed inside this

[@salvation6153]

great content, thank you )

[@netsaosa4973]

Thanks bro

[@barmannphoto]

Thank you! Curious why you used refs instead of React state to store the coordinates. Is there an advantage to this approach over using useState?

[@springwind98]

Hi, great work! What approach would you chose if we want to make an array of component draggable?

[@EricTsai-rj9vm]

thanks a lot

[@merunus8556]

Great tutorial, even though part with math calculations was a bit confisuing for me

[@diveindev]

Hey! Thanks for the feedback, I will try make a similar case and give a bit more details behind the computations.

[@fi1ipovv28]

Дякую! Цікаво скільки в тебе досвіду щоб так спокійно писати той код)

[@a89529294]

🤴🤴