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):
Collect this post to permanently own it.
Subscribe to Fred's Brain and never miss a post.