Overview

I was delighted for the opportunity to contribute to the React Beautiful Drag-and-Drop library. I worked closely with Alex Reardon on the multi-drag pattern. This pattern will allow the user to drag and drop multiple items into the same vertical list or the next column. We use this library for several features within Atlassian, such as Jira boards and Confluence's page tree. But the library is also open source for anyone to use.

Solution

The chosen solution took into account a large variety of situations and will work at scale (including lists, offscreen selections and so on).

Explorations in Jira Software’s Kanban board

Examples in v6.0.0 React beautiful dnd and release notes

Learnings

I saw firsthand how much attention to detail went into building this library. I got to learn so much about keyboard interactions, DOM events, and physics-based animation. I’m sure there has been UX improvement to the multi-drag pattern since I last contributed. Overall it was really fun! I recommend interacting with the examples on Storybook (best viewed on a desktop).

Note: Beautiful-DnD logo designed by Maryanne