Тёмный

Building draggable Component with React and TypeScript 

Dive in Dev
Подписаться 423
Просмотров 21 тыс.
50% 1
ВидеоПоделитьсяСкачатьДобавить в

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

Опубликовано:

 

14 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 25   
@DanishTroll87
@DanishTroll87 10 месяцев назад
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
@alext5497 Год назад
thank you for doing this without an external lib, i couldnt' even get gpt to do it right.
@BigBahss
@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.
@muhammadabdullahnabeel6039
@muhammadabdullahnabeel6039 11 месяцев назад
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.
@adairoreyes1644
@adairoreyes1644 2 года назад
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
@diveindev 2 года назад
Thanks Adario, I appreciate the feedback, will try to make a separate one and dive into nuances.
@balintbruncsics6396
@balintbruncsics6396 2 года назад
Dude, great work! Looking forward to the next video!
@diveindev
@diveindev 2 года назад
Thanks a lot! I'm happy that it was useful.
@小柴亮威
@小柴亮威 3 месяца назад
Thanks for this great video! I get it how to draggable object!
@thuannguyenvan5710
@thuannguyenvan5710 10 месяцев назад
Nice video . Now I just want it to move along the Y axis, what should I do?
@barmannphoto
@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?
@toshitsingh7270
@toshitsingh7270 Год назад
Thanks a lot, you explained everything perfectly ❤
@mohammadjavadaghazadehfard7873
@mohammadjavadaghazadehfard7873 Год назад
Thanks, It was very cool.🌹 please make more videos like this. Good luck. 🙏
@diveindev
@diveindev Год назад
Happy to hear that it helped 😀
@springwind98
@springwind98 Год назад
Hi, great work! What approach would you chose if we want to make an array of component draggable?
@Nagship
@Nagship 4 месяца назад
Can I apply position fixed inside this
@hector4like6gorilla
@hector4like6gorilla Год назад
thanks man!! you rock!
@salvation6153
@salvation6153 11 месяцев назад
great content, thank you )
@sangyoon9012
@sangyoon9012 Год назад
fantastic!!!
@netsaosa4973
@netsaosa4973 Год назад
Thanks bro
@EricTsai-rj9vm
@EricTsai-rj9vm Год назад
thanks a lot
@merunus8556
@merunus8556 2 года назад
Great tutorial, even though part with math calculations was a bit confisuing for me
@diveindev
@diveindev 2 года назад
Hey! Thanks for the feedback, I will try make a similar case and give a bit more details behind the computations.
@fi1ipovv28
@fi1ipovv28 Год назад
Дякую! Цікаво скільки в тебе досвіду щоб так спокійно писати той код)
@a89529294
@a89529294 Год назад
🤴🤴
Далее
Drag And Drop With React Hooks From Scratch
57:35
Drag And Drop With React Hooks From Scratch
Просмотров 66 тыс.
All useEffect Mistakes Every Junior React Developer Makes
22:23
All useEffect Mistakes Every Junior React Developer Makes
Просмотров 915 тыс.
ПОДРОСТКИ Раньше vs Сейчас (смешное видео, юмор, приколы, поржать)
00:59
ПОДРОСТКИ Раньше vs Сейчас (смешное видео, юмор, приколы, поржать)
Просмотров 2,7 млн
"Две правды о Лизе". История Елизаветы Пылаевой
1:07:47
"Две правды о Лизе". История Елизаветы Пылаевой
Просмотров 558 тыс.
自私老公趁我去倒水抢走饭，面对我还敢不给，直接给他一个平底锅【朱大帅and依美姐】
00:30
自私老公趁我去倒水抢走饭，面对我还敢不给，直接给他一个平底锅【朱大帅and依美姐】
Просмотров 828 тыс.
ОНА БЫЛА ПЕВИЦЕЙ🤪
3:13:12
ОНА БЫЛА ПЕВИЦЕЙ🤪
Просмотров 1,1 млн
Multiple List Drag and Drop in React [Easiest Way]
22:03
Multiple List Drag and Drop in React [Easiest Way]
Просмотров 21 тыс.
Websockets React & Node js ПОЛНЫЙ КУРС PAINT ONLINE & Canvas
1:11:56
Websockets React & Node js ПОЛНЫЙ КУРС PAINT ONLINE & Canvas
Просмотров 92 тыс.
You might not need useEffect() ...
21:45
You might not need useEffect() ...
Просмотров 163 тыс.
Drag and Drop in React with React Beautiful DnD
5:51
Drag and Drop in React with React Beautiful DnD
Просмотров 176 тыс.
Drag and drop на REACT JS. Сортировка. Просто и быстро!
6:25
Drag and drop на REACT JS. Сортировка. Просто и быстро!
Просмотров 63 тыс.
How To Build Sortable Drag & Drop With Vanilla Javascript
22:22
How To Build Sortable Drag & Drop With Vanilla Javascript
Просмотров 334 тыс.
This React Drag and Drop Component Is Magic
9:56
This React Drag and Drop Component Is Magic
Просмотров 94 тыс.
how I learned to code personal projects (use tutorials the right way)
5:36
how I learned to code personal projects (use tutorials the right way)
Просмотров 103 тыс.
React Drag and Drop List Sort Tutorial
9:54
React Drag and Drop List Sort Tutorial
Просмотров 20 тыс.
ПОДРОСТКИ Раньше vs Сейчас (смешное видео, юмор, приколы, поржать)
00:59
ПОДРОСТКИ Раньше vs Сейчас (смешное видео, юмор, приколы, поржать)
Просмотров 2,7 млн