React DnD in Examples
Published in
8 min readOct 7, 2020
React DnD is a set of React utilities to help you build complex drag and drop interfaces . We will take a look on it’s basic capabilities with implementing our own kanban board.
What will be covered in this article:
- Prerequisites
- Installation
- Implementing draggable item
- Implementing droppable item
- Creatin kanban board
- Adding multiple draggable items
- Make items sortable in the column
- Mobile version of drag and drop
- Refactor before adding drop restrictions
- Adding drop restrictions
Before we will start our journey, let’s see what we will get at the end (gif):
Prerequisites
We will start from a simple React application created by using create-react-app
script with few changes in a project (remove some styles and code fragments):