1
Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd
58s
2
Set up a React Environment with create-react-app
1m 21s
3
Create and Style a List of Data with React
7m 37s
4
Reorder a List with react-beautiful-dnd
8m 12s
5
Persist List Reordering with react-beautiful-dnd using the onDragEnd Callback
5m 34s
6
Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values
4m 22s
7
Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd
3m 26s
8
Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps
2m 18s
9
Move Items between Columns with react-beautiful-dnd using onDragEnd
5m 48s
10
Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props
4m 59s
11
Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop
2m 36s
12
Reorder Columns with react-beautiful-dnd
6m 47s
13
Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent
5m 58s
14
Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd
3m 14s

Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values

React^16.0.0

Share this video with your friends

<Draggable /> and <Droppable /> components provide snapshot objects to their child functions. These snapshot objects can be used to create beautiful visual queues for users while a drag is occurring.

Course

Beautiful and Accessible Drag and Drop with react-beautiful-dnd

Lars Jägare

~ 6 years ago

Hmmm, there is an error in the CodeSandbox when importing DragDropContext: Error Cannot find path: @babel/runtime/core-js/object/keys

Alex Reardoninstructor

~ 6 years ago

Hi Lars! Looks like a babel setup issue.

Best place to go is to head over to our repo and create an issue: https://github.com/atlassian/react-beautiful-dnd/issues