Drag n’Drop with react-beautiful-dnd
For our Module 4 project, we wanted to create an application that combined Khan Academy and Trello. In summary, a user would be able to register for a course that had specific tasks. Once the task was completed, a user had the ability to drag the task to a separate list as a way of organizing which tasks were finished. As you may have guessed by now, our app required a drag n’ drop feature. Lucky for us, there is a lot of libraries available for react that allows for drag n’ drop interactions within react.
One of the libraries we implemented was react-beautiful-dnd. I’m positive that we did not utilize the full features of what react-beautiful-dnd had to offer but for the purpose of our project, we implemented the basic drag n’ drop functionality.
React-beautiful-dnd is made up of three different components that we can import:
- DragDropContext, a component, that we use to wrap the part of our app, that we want to have drag and drop enabled,
- Droppable, component to wrap an element which can be dropped on to, and contains,
- Draggables, a component to wrap an element that can be dragged around and dropped into wrapped droppable elements.
Both droppable and draggable expects the immediate child to be a function that returns a React component. The first argument to this function is called provided, which is an object that has a property for draggableProps and droppableProps. These are props that need to be applied to the component that you want to designate as either your droppable or draggable. With your draggable component, the provided object also has another property called dragHandleProps, which controls the drag.
A DragDropContext has three call backs. onDragStart, which is called when the drag starts. onDragUpdate is called when something changes during a drag, such as an item is moved into a new position, and onDragEnd, which is called at the end of a drag. For the sake of project, we only focused on onDragEnd, which returned the result of the drag within the context.
The result returns is an object with multiple keys and values. The only keys we required was the source, destination and draggable. For the drag n’ drop to persist, a couple of state manipulation was necessary. The dragged element needs to be removed from the source Droppable content and added to the destination Droppable content. Essentially, the contents are rendered in their new components.
Some knowledge of array manipulation is required to make Drag n’ Drop work. To make it work for our project, the hardest part was making sure the the manipulation matched the format of the previous props we passed down or it would consistently crash the application.
(When implementing a drop n’ drop feature, utilize react-beautiful-dnd! Try not to implement drag n’ drop at all!)
Sources:
