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.

[DanishTroll]

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.

[alext]

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

[balintbruncsics]

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

[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.

[adairoreyes]

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

[muhammadabdullahnabeel]

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!

[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?

[mohammadjavadaghazadehfard]

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

[toshitsingh]

Thanks a lot, you explained everything perfectly ❤

[lethal_bot]

if i comeback to a page the drag is not working

[thuannguyenvan]

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

[apscbuilder]

Nice video, Which font in the video, I want to use it.😁😁

[springwind]

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

[fiipovv]

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

[merunus]

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