In this tutorial, we are going to see how to create a beautiful kanban board with simple drag and drop features with react-beautiful-dnd.
Click here for the CodeSandbox.
Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX. There are many use cases of drag and drop UI. The most common ones are:
- Using drag and drop in the browser to upload files
- Moving items between multiple lists
- Rearranging images or assets
Click here for the related blog post on drag and drop in React.
LogRocket on YouTube 🎬
If you enjoy in-depth video tutorials on frontend topics, check out LogRocket's YouTube channel. Make sure to give us a like if you find the video helpful and subscribe to stay updated on when we post new videos.
Top comments (3)
Really great article! I would love to see support added to track the index of an item within a column so that you can persist order of items within each column. Any idea how to go about that?
Thanks for making the video (seems simple enough). Personally, I would enjoy also separating the components into a couple of separate files to see how it might fit into a larger application.
I use Restyaboard for this Kanban approach. It’s a productivity and management tool specifically built around a Kanban-style workflow. Great free tool to use and I love it!