DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Play Button Pause Button
Brian Neville-O'Neill
Brian Neville-O'Neill

Posted on

Build a beautiful, draggable kanban board with react-beautiful-dnd

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)

Collapse
 
christopherhbutler profile image
Christopher Harold Butler • Edited on

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?

Collapse
 
seankaat profile image
SeanKaat

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.

Collapse
 
adammymilan profile image
adammymilan

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!

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.