Drag and Drop with react-beautiful-dnd

This tutorial will teach you how to utilize react-beautiful-dnd in order to build amazing drag-and-drop features within your React application.
GitHub Repo:
github.com/harblaith7/React-B...
Timeline:
0:00 - 4:38 - Intro
4:38 - 12:23 - Setup
12:23 - 27:56 - DragDropContext, Droppable & Draggable
27:56 - 40:15 - Handling Drag/Drop Events
40:15 - 59:00 - Multiple Droppables

[@Shaheer-xs5os]

This is the first time I have watched your video, but explained everything so well... keep it up man, you're an amazing teacher!

[@RG-sv4qb]

I see other creators getting credit for making "good" videos on BeautifulDND... clearly those people didn't watch this! Well done, and thank you, amazing video... still don't understand all the props that got passed, but maybe I'm not supposed to!?!?

[@rishabhsoni985]

Damn this is hands down a top tier explanation I ever saw in any tutorial. Good work man

[@outclass-agencedeconseil9840]

Incredibly simple and well taught! Thank you very much!

[@mayrarincones8427]

Now I finished it. Again, thank you so much. The explanation was crystal clear ❤

[@allengats9184]

Thank you for your video tutorial! Like others here, I was stuck for hours searching for simple and easy implementations of DnD libraries and I managed to make it work with your tutorial! Thanks man! keep it up!

[@gmologyofficial]

Will this approach work on touch devices? I created a drag and drop list with no library, but it won't work with touch inputs.

[@RedstoneHair]

I think this video best summarizes all of beautiful dnd

[@sandyyeo9267]

Thank you for this video! I was stucked for hours until I followed yours

[@orkoren2006]

Thanks man for a great explanation and for teaching a really important skill in React!

[@appstuff6565]

before reaching 15 minutes, i loved the explanation at @14:48 with diagram. Thanks! Subbed and Liked and saved!

[@rounakbhattacherjee5288]

What a beautiful explanation, you made it so easy, thanks man ❤

[@aaRept]

Beautifully explained! Thank you!

[@user-id3wi8ti8h]

Thank you for detailed explanation!

[@achrefnabil2463]

Thanks laith we need more projects with react js

[@jeffshepherd927]

Excellent tutorial. Thank you

[@mayrarincones8427]

I haven't finished the video but I need to stop right here!! hahaha THANK YOU SO MUCH! I spent couple of hours yesterday trying to make work two examples of the library in my code and I wasn't able to, always getting THE SAME ERROR: it wasn't finding the item. I was going CRAZY. It was the damn strict mode!! thank yoooou!!!

[@gmologyofficial]

Will this approach work on touch devices? I created a drag and drop list with no library, but it won't work with touch inputs.

[@mayrarincones8427]

@@gmologyofficial I haven't test it on mobile yet!

[@user-te1ut5ev8w]

Thank you for tutorial and for big scale interface VSCode - it is important for save helth eyes!
34:44 - the spread operator do copying only surfacly, and for difficult object need to do deep copying

[@matthewseneris6095]

my god, you're a hidden gem my guy

[@louie0187]

Great tutorial. Thank you

[@prathampanchariya36]

I love you video bro it helps me a lot thanks

[@ahmedyasser724]

really great tutorial

[@jgvlc]

Thank you very much for share!

[@mD-mp8bb]

Amazing Content

[@alishersaparov8098]

Great content

[@amanullahaman8750]

Thank you brother.

[@garikmelqonyan6011]

Good job!

[@OmG21097]

Thanks for your effort ❤. Can you make a tutorial for multiple horizontal drag and drop?

[@fiatluxinregnonoctis]

thank you

[@achrefnabil2463]

Please laith we need paid node js microservices course with serverless + DDD+CQRS+Event sourcing+ clean architecture ❤❤❤❤ you're the best 😍😍

[@appstuff6565]

hey thanks for this, i am in a similar issue. I am trying a linktree clone with supabase tables "users" and "links" as a learning experiment. I am using NextJS with Supabase. Right now im at a stage on how do i persist data to display links for a specific user as each user will have its own sorting arrangement. How do you think i should go about it?
All links are in "links" table and i get them from the user that requests it accordingly.
any help is appreciated.

[@user-vd5hj1kh6w]

I'm stuck doing an implementation of this in my own project, where when I do not specify the Droppable type as "group", the destination is coming back as null, even though I'm clearly dropping it over the Droppable component. If I do specify the type as "group", the drop registers... but obviously this won't work for me because I need to implement different logic. Have you ever run into something like this?

[@First_Code]

thanks very mush

[@moylababa8196]

Are there any new courses likely to come?

[@mahammadali4680]

"unable to find draggable with id" this error is showing . can anyone tell me why this is showing and can anyone help me to learn this drag and drop feature

[@appstuff6565]

How can we store this new arrangement in a database so it persists?

[@coolthingsindia]

I am having problem implementing dnd , my api are working fine but i am encountering this error two children with same id found , i ensured that ids are unique , but still same , can you help?

[@farukmuhammad9657]

Kai jama'aaaaaa

[@stc-yk3kx]

Thanks bro, I suggest check your audio its too low so if the ads pop up it blows up my ears. nah

[@lifeasdev7480]

where is the live preview?

[@matheusf6540]

does it work with nextjs?

[@sguitas]

no

[@OP-ig1fj]

yes

[@mshahzebraza]

this library is not supported for 3 years. Doesn't support multi-direction scrolling

[@akash-kumar737]

Yeah, go with dnd-kit

[@gmologyofficial]

Will that approach work on touch devices? I created a drag and drop list with no library, but it won't work with touch inputs.

[@anasouardini]

it's not maintained anymore.

[@lifeasdev7480]

can you explain