React Drag And Drop List With dnd Kit (React Drag and Drop Tutorial)

In this video I go over how to create a sortable list with dnd kit where we can move the items around. dnd kit is a great library for creating scalable, fast, and elegant drag and drop experiences. We use the useSortable hook in order to create elements which can be dragged and dropped throughout the list. React drag and drop can be tricky so hopefully this video gives you a great first start!


0:00 Intro / Project Showcase
0:31 Setup React project
3:20 Setup dnd kit contexts and components
12:01 Bring SortableItems to App
13:33 Create handleDragEnd code
16:56 Final project / thank you :)

[spiderdev]

I was struggling a lot to do this, I started today and I didn't know that a library exists, I was trying to do this in a more "native" way lol.
Thank you so much dude, you saved my day!

PD: Sorry if my english is not the best, im still learning 😓

[saadhisham]

I've watched a lot of drag and drop tutorials, and yours is definitely the best! It's short, straight to the point, and very clear. Thank you so much for making such a helpful tutorial! ❤❤

[buzztrucker]

I was trying to get through this and I watched other drag and drop tutorials for react with different approaches. Your explanation and walkthru is clear cut and to the point. Thank you. Please post other videos.

[italomarcos]

i just spent the last two hours struggling with react-dnd and that lib is trash, enough said. and your tutorial just saved me right now. it's simple, straight to the point anda very clear. this should be the top result when looking for drag n' drop in react

[michaelmclean]

This library is amazing. And this video is also amazing. Thank you.

[mainadc]

THANKS SOOO MUCH FOR SHARING THIS LIBRARY, IT'S A F**KING MIRACLE

[mohsenahmadi]

One of the best tutorials! Thank you 😊

[paulrodriguez]

I copy/pasted this code for project in my company. This tutorial is just that good!!!

[giovanniandrade]

That's a very good tutorial and definitely will help me to understand the documentation now, thanks a million !

[emmanueljulius]

Thank you very much mann, this saved me a lot of time and effort

[saurabhdaswant]

great good explanation please keep making such videos!
loved it!

[robynluo]

That's great. That solves my problem

[Clouder]

Thank you, learned a lot.
Can be improved with the indexes as they are available in the active and over objects.

[AakamshPM]

Hey Thanks for the video ! But I've one problem, when I drag and drop the item the animation isn't like yours. I've the animation of items sorting according to the dragging, but when I drop the item over another item, even though it changes the position, it shows the same animation like when there is no handleDrop written (12:47)

[tiptrcks]

hey in typescript and nextjs the handleDragend's is throwing error for possibly an undefined value for over.id and therefore i am not able to swap elements

[pixbug]

Hey! I enjoyed your video, thank you for your tutorial, can you please do a video for multiple columns version? more like a Kanban Board :)

[bourge]

Great Intro. Thanks ! Any idea on how to implement this with an array of objects? I get an error message "Objects are not valid as a React child" and can't find anywere a simple example

[LouiseCzedrianLaping-imtg]

wish you could add delete functionality in every item

[appstuff]

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.

[gagem.]

How do you get this to work with multiple dropable containers? Kanban board style?