Multi drag pattern for React Beautiful Drag and Drop library

Contributing to Atlassian’s open-source library React Beautiful DnD, I led design for a new “multi-drag” interaction pattern. This feature enables users to select and move multiple card items across several lists. Something you now see in Jira boards, Confluence page trees, and plenty of other products built on the library.

Design decisions

One of the key features that makes this react library so loved and reliable is the focus on optimised performance (championed by Alex Reardon).

• I designed the interaction to handle boards with thousands of tickets, balancing performance with flexible selection and movement.

• I also accounted for edge cases such as offscreen selections and virtualised lists.

• I introduced a “ghost” state, to preserve spatial memory in events where dragging interaction was not completed.

• Added a number indicator to show how many cards are being dragged.

Post-Launch

Impact

The work shipped in v6.0.0 and continues to be part of a library used by thousands of developers and downloaded over 1.5 million times per week. You can still find the examples in the release notes and Storybook.

What I learned

To build interactions that look beautiful and feel effortless, requires you to sweat the details. This project expanded my understanding of interaction design by diving into topics such as keyboard interactions, DOM events and physics-based animations. It also showed me how opinionated libraries don’t just provide utility, they help shape a shared standard of quality.

DnD logo by Maryanne.