React Drag And Drop (dnd-kit) | Beginners Tutorial

This tutorial is designed for beginners looking to integrate drag-and-drop functionality into a React project using dnd-kit. The focus is on creating a practical to-do list application, where users can add tasks and easily reorder them through drag-and-drop actions. The step-by-step guide covers the implementation of drag-and-drop interactions in a straightforward manner, with a specific emphasis on touch screen support to ensure compatibility across various devices. By following this tutorial, you'll gain a practical understanding of incorporating these features into your React applications.

-- 🌟 Useful Tools and Software 🌟 --

-- 🔗 Links 🔗 --

DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!

Chapters:
00:00 Introduction
00:16 Libraries comparison
01:05 dnd-kit setup
03:24 Column component (droppable area)
06:08 Task component (draggable item)
09:46 Position calculation function
12:31 Touch + Keyboard controls
14:00 Input + Add Task
16:55 Conclusion

[narendrasudrik]

Excellent clarity and just what is needed ! Many thanks. 👍👍

[UmaSahni.]

The most simple and easy to understand explanation. Salute 🫡🫡 your teaching skill.

[yoastertoaster]

Dude I can't even describe to you how much you have helped me. Thank you so much for such a great tutorial, I loved your explanation for using it and the other options. Everything was clear and simple, man you just got a new subscriber.

[karankka]

the video was great, can you make a video for kanbanboard using dndkit without typescript. as all the videos on yt for kanbanboard are in typescript

[ArtAssaf]

Hello, thanks for the tutorial. But i have an issue, i can't add a clickable element to the draggable element. The onclick doesn't work. For example adding a delete button to a task.
Thanks

[gabrielmokhele]

Thank but if you drag and dropping components stored inside the database

[kaushikid]

Good going creator. Can you please teach the basics of coding to Gen X or Bloomers. That would be an interesting video and would help slightly older people like me to understand coding.

[allhailalona]

excellent! thank you for that intro, explaining which package to choose! I liked and subscribed

[MartinSil-]

Finally...3rd tutorial I tried and worked for my Next app. Thank you

[prashantbansal]

Can someone tell how to persist like if I have data in a database and I want to persist the actual order then how to do that.

[RUFeelin]

Video is a great help - good luck getting more subscribers
Watching from UK

[shubhamtarade]

You are gonna long way man. Keep posting such content🙌

[deepmane]

as soon as drag and perform make api request using redux save new data after dandd

[tatatabletennis]

Thank god, this channel is there for helping me at right time.

[MohsinNaqvi-jkqi]

Thanks a lot.
you explained it amazingly.

[meleseayichlie]

Thank you for your smart video keep up the good work

[hikemalliday]

Very helpful and easy to understand, nice video

[sangeethasr]

Is there any way to add a button in the Task component to delete a task with an onClick event?

[vaibhavpant]

thank you for such a wonderful tutorial, it helped me a lot.

[Rafiramdhani]

why i have an error in props like this 'tasks' is missing in props validation