Nested drag and drop

EUI exposes EuiDraggable and EuiDroppable components (see documentation), which are wrappers around @hello-pangea/dnd(external, opens in a new tab or window). While excellent for simple lists, @hello-pangea/dnd is heavy and has limitations such as not being able to move items between different levels of nesting.

For complex use cases like this, we recommend Pragmatic drag and drop(external, opens in a new tab or window) by Atlassian. It is a performance-focused, flexible library that handles these scenarios efficiently.

The example below demonstrates a simplified version of Pragmatic's Tree pattern(external, opens in a new tab or window), adapted to use EUI components and design tokens with enhanced keyboard navigation.

Package versions

This pattern may work differently depending on which version of @atlaskit/pragmatic-drag-and-drop you use. Please check the versions used in our package.json(external, opens in a new tab or window).

Accessibility

This example uses nested EuiAccordion components with roving tabindex to improve usability, similarly as in Tree view pattern.

For complex trees, the recommended accessibility pattern is not to mimic mouse dragging with keys but provide a "Move" action. In this case, we use EuiPopover and EuiContextMenu composition inside the extraAction prop.

✄𐘗
bash code block:
✄𐘗yarn add @atlaskit/pragmatic-drag-and-drop @atlaskit/pragmatic-drag-and-drop-hitbox

Loading...