Перетаскивание (Drag and Drop) часто строится для сортировки списков контента по вертикали и горизонтали.
react-beautiful-dnd является отличным инструментом для этих случаев использования. Он использует шаблон render props для встраивания доступных функций dnd в списки, которые выглядят и ведут себя так, как вы ожидаете - и вы даже получите доступ к dnd с клавиатуры прямо из коробки, без дополнительной работы. На самом деле его легко начать использовать, и этот курс - отличное место для начала.
Мы создадим очень интерактивное приложение для управления задачами с нуля, используя строительные блоки react-beautiful-dnd. За 14 уроков вы получите практику:
создание контейнеров с возможностью сбрасывания для сортировки перетаскиваемых объектов по горизонтали и вертикали
перемещение предметов между столбцами
и даже двигая колонны сами
По окончании курса вы будете готовы встраивать этот мощный опыт в свои собственные проекты.
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
Beautiful and Accessible Drag and Drop with react-beautiful-dnd,
а также все другие курсы, прямо сейчас!
Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd
Урок 2.00:01:22
Set up a React Environment with create-react-app
Урок 3.00:07:38
Create and Style a List of Data with React
Урок 4.00:08:13
Reorder a List with react-beautiful-dnd
Урок 5.00:05:35
Persist List Reordering with react-beautiful-dnd using the onDragEnd Callback
Урок 6.00:04:23
Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values
Урок 7.00:03:27
Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd
Урок 8.00:02:19
Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps
Урок 9.00:05:49
Move Items between Columns with react-beautiful-dnd using onDragEnd
Урок 10.00:05:00
Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props
Урок 11.00:02:37
Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop
Урок 12.00:06:48
Reorder Columns with react-beautiful-dnd
Урок 13.00:05:59
Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent
Урок 14.00:03:15
Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.