Toptube Video Search Engine



Title:React Drag And Drop (dnd-kit) | Beginners Tutorial
Duration:17:27
Viewed:21,182
Published:18-01-2024
Source:Youtube

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 - https://discord.gg/TWBtv5an7N Subscribe - https://www.youtube.com/channel/UCeRQr_iEA4-z-Mkt9sg4PwA ☕ Donate to support the channel! - https://www.buymeacoffee.com/CodeCompleteYT -- 🌟 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/react-drag-and-drop 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



SHARE TO YOUR FRIENDS


Download Server 1


DOWNLOAD MP4

Download Server 2


DOWNLOAD MP4

Alternative Download :