Drag and Drop in React with React Beautiful DnD

Learn how to add drag and drop to a React app with React Beautiful DnD.
We'll walk through how to prepare a React app with React Beautiful DnD's component API and use that to create a droppable area. We'll also learn how to save the state of our drop area so our draggable items stay in the right place when moved.
💾 Code
github.com/col...
🗒️ Read More
www.freecodeca...
🔔 Subscribe for more tech and developer videos
www.youtube.co...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayoc...
💝 Sponsor me for more free content like this!
github.com/spo...
👨‍🚀 Brought to by colbyfayock.com
www.colbyfayoc...
🎥 Want to know what A/V equipment I use?
www.colbyfayoc...
🧰 More Resources
React Beautiful DnD
github.com/atl...
Code Demo
github.com/col...
🎼 Music
Four Moure Weeks by Vans in Japan
KZbin Audio Library
#colbyfayock #reactjs #draganddrop #draganddropseffects #webdevelopment

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@alma-powell]

This is one of the best React Library tutorials I've seen. Quick, understandable, and concise. Very impressive.

[@colbyfayock]

thank you Alma!!

[@rauldeandrade]

I watched several half hour plus tutorials on this lib that just left me more confused than when i started, before coming here. 6 minutes and super simple and clear explanation. I wish every tutorial was like this. Thanks!

[@colbyfayock]

ah thanks! glad it helped out

[@ivangunchev4782]

I am pretty sure that this should be the way most tutorials should be executed - eloquent, straight to the point, referencing the documentation, no bs before and after. Hats off to you, Colby. You've gained a sub :)

[@colbyfayock]

thanks Ivan! 🙌

[@cgfx360]

I went through a metric ton of extremely complicated and complex videos describing implementing this, and could not figure it out. Your video was ridiculously easy to follow and very clear. Thank you!

[@colbyfayock]

no problem, so glad to hear that! thanks for checking it out :D

[@AbhirupGhoshPiano]

Has to be the best tutorial I've seen about this library. Quick, concise, easy to understand.

[@colbyfayock]

thanks appreciate the kind words!

[@kirklayer2023]

This is just what I needed. Thanks for making the 5-min video. Yours is better than the official github doc

[@colbyfayock]

thanks kirk :)

[@icecruiserr]

Excellent tutorial and loved how it got straight to the point! Thanks again

[@colbyfayock]

thanks James! :D

[@iwanpieterse6953]

A breath of fresh air. Clear, concise, and easy to understand. Thank you for making this.

[@colbyfayock]

Happy to hear that. Np!

[@hyfydistro]

Thanks flipping much! This was succinct and kind of thorough. I would advise people to be aware of the data types accepted. ``'s property `draggableId` only accepts strings! Otherwise, you'd keep getting an error that `draggableId` does not have an ID! That tripped me!

[@colbyfayock]

haha no problem! glad you got it figured out

[@leonardocitton4627]

Wow, best coding videos in YT! Fast, coincise and well organised... Congrats!

[@colbyfayock]

Thanks for the kind words Leonardo!! 🙏

[@arProject.webdev]

3 years later you still save my life, thanks alot

[@colbyfayock]

🫡

[@Buffnerd_i]

I love you man, straight to the point,no bullshit, explaining how everything works, I even managed to NOT fuck it up and have 0 errors. You got my like and subscribe.

[@colbyfayock]

thank you! 🙌💯 awesome to hear 💪

[@theAsyncGuy]

No extra talk. Straight to the point. I like it.

[@colbyfayock]

glad you enjoyed it!

[@jethrotalavera3314]

Life saver needed to add a D n D feature for work. Thank you

[@colbyfayock]

no problem!

[@owfuldev]

Hi, Colby! Thank you for this tutorial and I just wanna tell you that you are one of the best content creators here that I love to follow! Your contents are really on top, easy to understand, simple, and I just CLICK! After my first time watching your video a while ago, I keep coming back. I'm not sugarcoating, but you are indeed one of the best! Hope one day I can meet you because YOU ARE ONE OF MY FAV DEVS!!! Please keep making contents!

[@colbyfayock]

thank you for the kind word!! 🙌

[@naimurrahman9979]

Sweet little video to userstand everything perfectly.. No extra talking, just clear instructions.. Awesome!

[@colbyfayock]

Glad you enjoyed!

[@holyfreakinguacamole]

Just heard you on Syntax (on which you mentioned React Beautiful DnD!). Well it just so happens that I'm building out a test-project for my first web-dev job, and a *bonus* feature is that I make a list drag-and-droppable!!! woot woot! Here we go! Thanks, Colby :)

[@colbyfayock]

haha good timing! glad it helped :D

[@raifaustino]

Great tutorial! 6 minutes cutting straight to the chase instead of dabbling on the IDE for half an hour. Thanks!!

[@colbyfayock]

No problem!

[@foo3268]

thanks brother, I like how you edited the awkward silence and typing out.

[@colbyfayock]

Definitely lots of awkward silences 😂 glad you enjoyed it

[@taeloseholoba3490]

damn that's a very insightful tutorial, you won't believe it's only 6 minutes thank you Colby

[@colbyfayock]

no problem!

[@evanbero9705]

Great job of explaining. Works perfectly. I've seen some other videos that overcomplicate dnd. This is great, thank you.

[@colbyfayock]

no problem!

[@goethe1776]

Damn, so much concise information in under 6m, that's just beautiful man...

[@colbyfayock]

haha thanks! 🙌

[@BbB-vr9uh]

Great tutorial! Love that show the docs while you explain the imported things, then show the code update you make with it.

[@colbyfayock]

thank you! glad it helped

[@alexmcclay8152]

Havn't tried to implement it yet on my app, but this video was quick and to the point, thanks!

[@colbyfayock]

No problem!

[@miodice3]

awesome video, will try to implement this later today. thanks for taking the time to assemble this and post it, its very clear

[@colbyfayock]

so glad it was helpful!

[@simonbeverskog1784]

Really great video! You explained it very clearly and it was easy to follow along even as a beginner, big thumbs up and keep it up!

[@colbyfayock]

thanks Simon! :)

[@moryakantha5782]

I was coding a ToDo List app with NextJs and wanted to implement this dnd stuff and this was very helpful

[@colbyfayock]

awesome! glad it helped 🙌

[@aviraljain8785]

Bro this video is so simple and easy to understand. Finally after long searching for drag and drop this video ends my searching. Thank you so much.❣

[@colbyfayock]

really happy to hear that! no problem :)

[@realdevdiv]

if you are having problems with the id not found. Replace with: export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => { const [enabled, setEnabled] = useState(false); useEffect(() => { const animation = requestAnimationFrame(() => setEnabled(true)); return () => { cancelAnimationFrame(animation); setEnabled(false); }; }, []); if (!enabled) { return null; } return {children}; };

[@NickReisenauer]

That was pretty cool! I've never worked with drag-and-drop before

[@colbyfayock]

yeah! drag and drop is awesome and it's not too bad to set up. can make for some really interactive features in an app

[@Nickname732]

you deserve more subscribers and likes

[@colbyfayock]

thanks Kamil

[@karlo768]

Love this tutorial, good fast pace, no time wasted!

[@colbyfayock]

thank you!

[@dermotboyle9968]

Super good Colby, loved how you did the cuts to keep it concise, thanks ! :)

[@colbyfayock]

thank you Dermot!!

[@scottsaccenti]

Really good, clear and to the point

[@colbyfayock]

Thanks Scott!

[@andreafreeman6396]

Amazing tutorial!! Thank you for explaining everything so clearly

[@colbyfayock]

You got it 😁

[@petakirikiri4074]

What a great video. Nice and concise and to the point, well edited thanks for that it was really helpful.

[@colbyfayock]

thanks, happy to hear that! 🙌

[@viveknigam3003]

Just what I needed! Thanks a lot for this video! 🤩

[@colbyfayock]

no problem. glad it helped! :D

[@sureshjavvadi2870]

Hy while using drag drop in horizontal scroll bar the items are not dropped beyond the initial width Initially i have 6 images showing in scroll bar, i am able to drag and drop in this 6 images but i unable to drop the items beyond the 7th image. help me

[@ta9sas]

Quick and well explained, thank you colby

[@colbyfayock]

you're welcome! :D

[@vladimiregorov6875]

Thank you very much man, you explained all very simply and clearly. You make cool videos. Good luck

[@colbyfayock]

Thanks so much Vladimir!

[@francoaccifonte2395]

incredible video, I love how short it was. Imma go try it right now, cheers!

[@colbyfayock]

thank you! 💪

[@emyboybeats4330]

Nice tutorial, Straight to the point.

[@colbyfayock]

thank you!

[@godswillumukoro8908]

Thanks Colby, got a quick question. How to save the position of draggable component after refreshing page

[@colbyfayock]

no problem! you have a few options, it mostly depends on if you want this to save locally in the browser session or if you want to save it remotely. if you want to save it locally, you can use localstorage and sync the state. otherwise you can save it in a database

[@godswillumukoro8908]

@@colbyfayock Thank you.

[@rimajlassi7183]

simple, fast and clear thank you !

[@colbyfayock]

no problem!

[@colbyfayock]

Next, learn how to add Chakra UI components to a React app kzbin.info/www/bejne/q5OlZp9jfbuDnbs Make sure to subscribe for more! kzbin.info

[@hanzhiyin5239]

Clear and concise! this tutorial is terrific!

[@colbyfayock]

thanks happy to hear that!

[@MistaT44]

Such a helpful and concise tutorial. Cheers bro! :)

[@colbyfayock]

Thank you! 😁

[@dinizec]

great tut, I wash every tutorial on youtube was this good

[@colbyfayock]

thanks for the kind words :) glad it was helpful!

[@watchyoutb]

thanks, concise and good to follow along, all makes sense!

[@colbyfayock]

thanks John!

[@PeeGaming]

Is it possible to drag and drop multiple list items if so will you please do a tutorial on that? Thanks for the video :)

[@peeyushchaturvedi798]

I would love to know about Multi drag and its implementation as well.

[@Hennadiii]

That's great! Short and what's needed!

[@colbyfayock]

glad it helped!

[@shivambhatnagar9473]

Man you are a live saver. Thanks for this wonderful tutorial.

[@colbyfayock]

glad it helped! 🙌

[@sergi3629]

This helped a lot, had it working in 10 mintues.

[@colbyfayock]

yay awesome! happy to hear that 🙌

[@林-f4k]

This the best video to learn beautiful DND

[@colbyfayock]

super happy to hear that!🙌

[@hafiedzmada]

thanks for the tutorial! your explanation are quick and clear! keep it up!

[@colbyfayock]

you're welcome!

[@dramastar30]

This was cool and on point. Thanks man for creating this tutorial 👍🏻

[@colbyfayock]

no problem, glad it helped!

[@oscarmejia8306]

Followed the example almost exactly the same and works on my app!

[@colbyfayock]

awesome glad it worked out!

[@b2c205]

my man, thanks for this, quick explanation.

[@colbyfayock]

No problem 💪

[@usmanasghar8779]

good and concise than creator. excellent buddy..

[@colbyfayock]

thank you!

[@Frest99]

Thank you man, super simple explanation

[@colbyfayock]

no problem, glad it was helpful!

[@albarmoerhamsa4189]

Thanks bro, that was pretty cool and easy to learn

[@colbyfayock]

thanks, glad you enjoyed it!

[@eldersonlaborit2290]

Awesome dude, this was what i looking for.

[@colbyfayock]

thanks Enderson! glad it helped

[@tranbao2799]

Wish I found this earlier lol. This video is kinda easy to follow

[@colbyfayock]

glad to hear, hope it still helps :)

[@EnesKab]

Highly appreciated. Thank you !

[@colbyfayock]

you got it! 🙌

[@kevklash]

The best example of this library ever. Thanks so much bro, you got a new subs!

[@colbyfayock]

Thank you!

[@Atif1702]

My coding life is much easier since I found you. You rock, man ;)

[@colbyfayock]

thanks :) glad it helped!

[@Atif1702]

@@colbyfayock Have you used Fluent UI with NextJS? It is having issues with NextJS

[@colbyfayock]

@@Atif1702 cant say ive ever tried that

[@Atif1702]

@@colbyfayock Oh np 😉

[@brandonayala2507]

This was great i dread doing drag and drop feel like it's overly complicated for setup, but this helps Thanks

[@colbyfayock]

glad to hear!

[@amlanmishra6273]

i love your code ! Its so clear and simple to understand ! thanks mate ^_^

[@colbyfayock]

Thanks 😁 and no problem!

[@dheerajkumartiwari5104]

Great video. I am having one problem. If the list is very big . How can I add automatic scrolling while dragging the item?

[@talhaboyraz]

Thank you so much Colby. Excellent tutorial .

[@colbyfayock]

you're welcome! :)

[@VikNov]

Great, thank you for not wasting too much of our time 😃👍

[@colbyfayock]

haha no problem!

[@waliullahkhan6862]

Just Amazing sir, I first time tried and got it a success ... Thank you for your outstanding work.

[@colbyfayock]

And thanks for the nice words! Glad to hear it helped

[@ysarsenekuo5498]

Thanks for sharing. This is really helpful!

[@colbyfayock]

no problem, glad to hear! :)

[@bokar98]

Fast and simple. Thanks!

[@colbyfayock]

no problem!

[@amirhosseinsefati]

Wow, really helpful. Thanks for sharing your knowledge.

[@colbyfayock]

No problem!

[@lrajoo11]

amazing and so short! Love it

[@colbyfayock]

thank you!

[@aryanchatterjee8659]

Loved this video. Exactly what I needed.

[@colbyfayock]

awesome, glad to hear that!

[@13thlwvemike95]

Maaan. if all tutorials could be like this ....

[@colbyfayock]

haha glad it was helpful!

[@imlava5464]

Damn, it's really excellent, thank you so much :D

[@colbyfayock]

no problem! 😀🙌

[@whoisarjen6368]

This was awesome, thank you!

[@colbyfayock]

No problem!

[@majd3641]

very nice and simple tutorial, thank you.

[@colbyfayock]

You're welcome 😁

[@appstuff6565]

hey thanks for this Colby! I am working on a similar project, however, each specific user has their own arrangement, so how can i persist data of items for that specfic user and its item arrangement? Im using supabase to fetch the items. and normal map function to display. The issue is in its persisting.

[@Porcarito]

Nice video man, u save my day.. greetings from Argentina!!

[@colbyfayock]

aw thanks! greetings :D

[@jimchapman4579]

Great video! Helped a lot! Thanks!

[@colbyfayock]

np :)

[@ElChowDinamico]

Hi! I'm getting an innerRef error, and I've narrowed it down to it beeing I'm creating the dragdropcontext inside a div down the chain of elements and I need to get the dom ref, I've been trying to gather information about this but I haven't been able to find any good solution. 'provided.innerRef has not been provided with a HTMLElement.' this is my error and my code is basically the same as yours but the is inside of a div inside of a div I would really apreciate it if you could help me out, thanks! great vid

[@colbyfayock]

hey can you put together the example in a codesandbox so i can take a look? codesandbox.io/

[@ElChowDinamico]

@@colbyfayock Hey! sure, I've never used codesandbox before, hope I did it right, here you go: codesandbox.io/embed/affectionate-pond-cr7qp?fontsize=14&hidenavigation=1&theme=dark

[@ElChowDinamico]

@@colbyfayock I got it working! I'm so dumb... I didn't realize you needed to use (provided) => () and I was using {} instead -.- Thank you anyways! nice tutorial got it working perfectly now

[@colbyfayock]

​@@ElChowDinamico ah haha I'm happy to have helped debug 😂but glad to hear you figured it out!

[@yablablaable]

@@ElChowDinamico Thanks, was struggling with the exact same thing!

[@MuhammadFahreza]

Hi Colby , great video ! I was wondering how can you instantly write 'handleOnDragEnd" at 4:07 ? did you use some vscode extension ? thanks

[@colbyfayock]

sorry to disappoint you but I pasted the value in with CMD+V 😭

[@shujathaliirfan2662]

U are too good at it

[@colbyfayock]

thank you :)

[@ELMlKO]

2 issues people can encounter while using react beautiful dnd 1) the drag not working: this is usually because you applied the style attribute 2) strange offset: copy paste the nevessary code into the draggable: {(provided, snapshot) => { if (snapshot.isDragging) { const offset = 310; const x = provided.draggableProps.style.left - offset; provided.draggableProps.style.left = x; } return ( {num} ) } } and add top: auto !important; to the draggable css

[@clairedochez3743]

Thank you for this amazing tutorial!

[@colbyfayock]

No problem 🙌

[@iShadowDragon]

Thanks man, this was really helpful

[@colbyfayock]

So glad it helped! 🙌

[@nithinsamuel9995]

Thank you so much.. very nice explanation..subscribed

[@colbyfayock]

thanks Nithin! :)

[@alfacuber]

Hi, great tuturial! If I have two arrays, how can I drag items between them? I have two groups which can be mixed

[@colbyfayock]

hey Eyal, have you checked out this example from their docs by chance? react-beautiful-dnd.netlify.app/?path=/story/board--simple here's the source code: github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/board/board.jsx i think the gist is having a Droppable that wraps both containers and using React state to manage the locations

[@alfacuber]

@@colbyfayock Thanks!

[@hudd1n366]

Terimakasih, penjelasan anda sangat baik dan singkat 👍👍

[@colbyfayock]

Tidak masalah!

[@blash1314]

thanks man great tutorial for react newbie like me to easy catch up and hands on dnd

[@colbyfayock]

no problem!

[@DailyMindfulMotivations]

Thus is heaven! What a great video! ❤

[@colbyfayock]

thank you!

[@davidtjones]

Thank you so much for this video! Great tutorial :)

[@colbyfayock]

no problem! 🙌

[@hungryghost5589]

Awesome video, thanks!

[@colbyfayock]

thanks, no problem! :)

[@arthursilva3141]

Hey Colby, could you make a video teaching how to add drag and drop among multiple vertical lists? like a kanban board, for example

[@colbyfayock]

no promises but i'll add it to my list :)

[@DeepthaKarthick-k9d]

How do i keep the graggable in its original place untill its being dropped? Like i wanna have a copy of the card in its original place while its being dragged