React Drag And Drop (dnd-kit) | Учебник для начинающих

Это руководство предназначено для новичков, желающих интегрировать функциональность перетаскивания в проект React с помощью dnd-kit. Основное внимание уделяется созданию практичного приложения для управления списком дел, в котором пользователи могут добавлять задачи и легко менять их порядок с помощью перетаскивания. Пошаговое руководство описывает простую реализацию взаимодействия с помощью перетаскивания, уделяя особое внимание поддержке сенсорных экранов для обеспечения совместимости с различными устройствами. Следуя этому руководству, вы получите практическое представление о том, как интегрировать эти функции в свои приложения React.

Discord -   / discord  
Подписаться -    / @code_complete  
☕ Сделайте пожертвование, чтобы поддержать канал! - https://www.buymeacoffee.com/CodeComp...

-- 🌟 Полезные инструменты и ПО 🌟 --
🌐 Скидка 10% на домены на Domain.com (используйте код DOMAIN10) - https://domain.mno8.net/CodeComplete
☁️ БЕСПЛАТНЫЙ хостинг сервера на Linode в размере 100 долларов США - https://linode.gvw92c.net/CodeComplete
📚 Скидка 30% на годовую подписку Skillshare (используйте код annual30aff) - https://skillshare.eqcm.net/CodeComplete

-- 🔗 Ссылки 🔗 --
💻 Код - https://github.com/CodeCompleteYT/rea...

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Некоторые ссылки в описании являются партнёрскими. Канал будет получать небольшую комиссию с продаж по этим ссылкам, но с вас никаких дополнительных сборов не будет. Спасибо за поддержку канала, чтобы я мог продолжать делать эти бесплатные уроки!

Главы:
00:00 Введение
00:16 Сравнение библиотек
01:05 Настройка DND-Kit
03:24 Компонент «Столбец» (область с возможностью перетаскивания)
06:08 Компонент «Задача» (перетаскиваемый элемент)
09:46 Функция вычисления позиции
12:31 Управление с помощью сенсорного экрана и клавиатуры
14:00 Ввод данных и добавление задачи
16:55 Заключение