Drag and Drop in React (Complete Tutorial)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video we will be learning how to handle drag and drop in React with the dnd-kit library! We will be handling the drop end function that handles updating our state, we will be creating droppable areas and draggable items to drag into. We will be following all of the best practices and design patterns around React!

TIMESTAMPS
00:00 Intro
00:58 Code overview
02:29 Creating components
08:02 Installing dnd-kit
08:53 Handling drag end function
12:55 Creating droppable column
13:59 Creating draggable box
17:47 Recap

[edward-vonschondorf-dev]

Perfect timing, will try to use this on my next project!

[tomasburian]

Thank you for using TS in your tutorials. You's the best!

[imvikasjangir]

Thanks a lot for making it easier, and I'm gonna subscribe your channel for future updates🙌🏻

[alexandroarauco]

simple and efficient sample to understand drag and drop.
Thanks.

[abdulhamidusman]

I wished i saw this earlier.

Great video, Bro

[golden]

Needed this one a lot thank you so much.

[euuNeguinho]

Great content, the Brazilian thanks you

[beodan]

Very helpful, drag-drop become more easy

[MadCreatorsAnuj]

Can you please make a tutorial on the template builder in react js, for which we want nested drag and drop like container inside container

[oussamaayadi]

Thank you. I have a question is there is any way to drag and drop in middle of elements?

[sunidhichouhan]

Can you please share a tutorial with grid layout, i need it in my project. currently, what you showed it is between columns. I want that the item can be placed freely and there is a single array. Displayed in flex direction row, can someone help me here??. I will be really grateful.

[PeterStJ]

Thank you for your effort. I am wondering how come all demos on the DNDKit website the 'drop' is animated, but your is not at all, it just renders on the new place without any interpolation? Is this because of tailwind?

[vijaychapagain]

how to do for nested array that can go to root element or to other element meaning
(anywhere)

[igor]

YouTube literally doesn't have a tutorial that would check both rows and columns. I tried with your tutorial today, but it doesn't seems to address this challenge.
Would it be possible to create such? Thank you in advance!

[Fam-mi]

If map returns a new array, why do you need to use callback in setState?

[SaiponathGames]

Will this work for react native as well?

[srkuleo]

Isn't dnd-kit not maintained anymore? I am sure I've read somewhere that original creator stopped maintaining it or rather is not updating it, so in the future some APIs might not work.

[ptolemyhenson]

How do you maintain order between elements?