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.
Discord - / discord
Subscribe - / @code_complete
☕ Donate to support the channel! - https://www.buymeacoffee.com/CodeComp...
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - https://domain.mno8.net/CodeComplete
☁️ FREE $100 for server hosting on Linode - https://linode.gvw92c.net/CodeComplete
📚 30% off annual Skillshare membership (use code annual30aff) - https://skillshare.eqcm.net/CodeComplete
-- 🔗 Links 🔗 --
💻 Code - https://github.com/CodeCompleteYT/rea...
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
Смотрите видео React Drag And Drop (dnd-kit) | Beginners Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code Complete 18 Январь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 45,083 раз и оно понравилось 1.2 тысяч людям.