<h2>Preface</h2>
<p>Because it is very difficult to create a drag and drop experience that is accessible, and meets the needs of all users, DDS has taken the stance that we will not release drag and drop from our library at this time. Instead, our guidance is designed to help designers, developers, and PMs make informed decisions and build accessible implementations when needed.</p>
<p>While drag and drop can be implemented to meet accessibility requirements, doing so requires: </p>
<ul>
<li>careful attention to usability </li>
<li>keyboard support</li>
<li>screen reader feedback</li>
<li>motion considerations</li>
</ul>
<p>It is not a low-effort interaction. Teams need to plan for proper focus management, ARIA roles, and alternative pathways for users who cannot use a mouse or perform dragging gestures. </p>
<p>For these reason, DDS encourages product teams to weigh the effort involved and assess whether drag and drop truly adds value to their experience. </p>
<p><strong>Designers</strong> should consider whether drag and drop truly enhances the experience. It requires thoughtful interaction design, attention to usability, and strong keyboard and screen reader support.</p>
<p><strong>Developers</strong> need to plan for proper ARIA roles, focus management, and keyboard compatibility. Drag and drop isn’t just visual, it involves live announcements, accessible hit targets, and alternative input methods. </p>
<p><strong>Product managers</strong> must understand that drag and drop can be made accessible, but it is not a low-cost feature. It demands collaboration across disciplines, validation with assistive technologies.</p>
<p><strong>Accessibility teams</strong> should have a clear framework to evaluate whether drag and drop meets WCAG and internal standards. Our documentation outlines what to look for in accessible implementations and offers best practices to guide review.</p>
<h2>Use</h2>
<p>A drag and drop component allows users to select and hold an item, move it to a different location, and release it to place it there, using a mouse, keyboard or other input device. This functionality is commonly used for file uploads, reordering lists, and customizing layouts.</p>
<h3>File upload</h3>
<p>Here the drag and drop allows users to drag a file from a folder or other source and drop into a file uploader. You can pair a drag and drop with a file input to create a robust file upload experience.</p>
<h3>List items</h3>
<p>List items can be made draggable top to bottom to allow users to manually reorder them, or left and right to create new lists or move items between lists.</p>
<h3>Customizing layouts</h3>
<p>You can drag and drop widgets or components to arrange them as benefits your use case. It is commonly used to customize dashboards or interfaces.</p>
<h2>When to avoid drag and drop</h2>
<p>Often, the simplest solution is the best one for overall user experience, and they&#39;re usually easier to design and code.</p>
<ul>
<li>Accessibility concerns: For users who rely on keyboard navigation or screen readers, ensure alternative methods are available.</li>
<li>Simple selections: If a simple click or tap can achieve the same result, drag and drop might be overkill.</li>
<li>Action menu: When an action menu is present, place the move actions inside of the action menu. This provides a keyboard accessible way to move items that doesn’t rely on mouse clicking and dragging.</li>
<li>Performance issues: In applications with heavy data processing, drag and drop interactions might introduce performance bottlenecks.</li>
<li>Complex workflows: For tasks requiring multiple steps or confirmations, drag and drop might not provide the necessary clarity.</li>
</ul>
<h2>Alternative Patterns</h2>
<p>Below are common drag-and-drop use cases and their recommended alternatives, including options that can be built using existing DDS components and foundations.</p>
<h3>Reordering items in a list</h3>
<p>Use case: Change the order of items within a list (e.g., tasks, cards, content blocks). </p>
<p>Alternatives:</p>
<ul>
<li>“Move up” / “Move down” buttons:  inline actions that let users reorder items one position at a time.</li>
<li>Contextual menu actions:  options like “Move to top” or “Move to position 3” in a dropdown menu.</li>
<li>Order number input field:  allows users to manually define an item’s position via a numeric field.</li>
<li>Keyboard reordering:  Use arrow keys to reposition items, with Enter/Space to “grab” and confirm.</li>
</ul>
<p> </p>
<p>DDS supported components for this alternative are <a href="/components/button">button</a>, <a href="/components/action-menu">action menu</a>, <a href="/components/text-input">text input</a><a href="/components/text-input"></a>, and <a href="/components/list">list.</a> </p>
<h3>Moving items between containers</h3>
<p>Use case: Transfer items from one category or section to another (e.g., Kanban columns, folders, playlists). </p>
<p>Alternatives:</p>
<ul>
<li>“Move to…” dropdown menu:  Users select the destination from a list of valid options.</li>
<li>Checkbox + bulk action bar:  Users select one or more items and choose a destination in bulk.</li>
<li>Dual-list pattern (left - right):  Items are moved between two lists using directional buttons.</li>
</ul>
<p> </p>
<p>DDS supported components for this alternative are <a href="/components/dropdown">dropdown</a>, <a href="/components/checkbox">checkbox</a>, and <a href="/components/card">card. </a></p>
<p><a href="/components/card"></a></p>
<h3><a href="/components/card"></a>Uploading files by dragging</h3>
<p>Use case: Upload local files by dragging them into a designated drop area.</p>
<p>Alternatives:</p>
<ul>
<li>“Browse” or “Select File” button:  opens the system file picker—a universal and accessible solution.</li>
<li>Clickable upload area:  visually styled to suggest drag-and-drop, but fully accessible by click or keyboard.</li>
<li>Keyboard shortcut to open file picker:  bound to the same action as the file input.</li>
</ul>
<p>DDS supported components for this alternative are <a href="https://www.delldesignsystem.com/components/text-input">text input</a>, and styling guidance for <a href="/components/dropdown/?tab=Design">labels</a>.</p>
<p><a href="/components/dropdown/?tab=Design"></a>Selecting multiple items via drag</p>
<p>Use case: Select multiple items within a list or grid (e.g., files, assets, images).</p>
<p>Alternatives:</p>
<ul>
<li>Checkboxes per item with bulk action bar:  allows selection of multiple items and batch actions.</li>
<li>Shift + click:  selects a range between two items (requires keyboard and mouse support).</li>
<li>Ctrl + click:  allows selection of multiple non-contiguous items.</li>
</ul>
<p>DDS supported components for this alternative are <a href="/components/list">list</a>, <a href="/components/checkbox">checkbox</a>, and bulk actions for <a href="/components/table">tables</a>.</p>
<h3>Positioning items in a free layout</h3>
<p>Use case: Let users manually organize elements within a flexible area (e.g., dashboards, layout builders).</p>
<p>Alternatives:</p>
<ul>
<li>Grid-based positioning with controls:  Use arrow buttons or numeric inputs to control placement.</li>
<li>Button-based “move to” actions:  Move elements left/right/up/down using directional controls.</li>
<li>Predefined layouts with editable zones:  Offer layout templates where users can swap or rearrange content within fixed slots.</li>
</ul>
<p>DDS supported components and elements for this alternative are <a href="/foundations/grid">grid</a>, and <a href="/components/card">card</a>.</p>
<h3>Other alternative interactions</h3>
<p>Resizing items: Use plus/minus buttons or numeric fields for width/height.</p>
<p>Combining or linking elements: Use step-by-step flows, dropdown builders, or selection menus.</p>
<h2>Interaction</h2>
<h3>Keyboard navigation</h3>
<p>To meet accessibility standards, all drag and drop interactions must be fully operable using a keyboard. This ensures that users who cannot use a mouse or perform dragging gestures still have access to the same functionality. </p>
<p>General requirements</p>
<ul>
<li>All interactive elements must be reachable using the Tab key.</li>
<li>Draggable items should support being &quot;picked up&quot; and &quot;dropped&quot; using Space or Enter.</li>
<li>Movement between valid drop targets should be enabled via Arrow keys.</li>
<li>Visual focus indicators must be clear, consistent, and visible throughout the interaction.</li>
</ul>
<p>Example flow for keyboard-based drag and drop</p>
<ol>
<li>Press <strong>tab</strong> to focus on a draggable element.</li>
<li>Press <strong>spacebar</strong> or <strong>enter</strong> to grab the item (aria-grabbed=&quot;true&quot;).</li>
<li>Use <strong>arrow keys</strong> to move between drop targets.</li>
<li>Press <strong>spacebar</strong> or <strong>enter</strong> again to drop the item in the selected location.</li>
</ol>
<h3>Behaviors and states</h3>
<p><a href="/components/button"></a></p>
<h4>Draggable item</h4>
<p>These are states that help the user understand what elements can be dragged, what is currently being dragged, and when the interaction ends.</p>
<table>
<thead>
<tr>
<th>State</th>
<th>Behavior</th>
</tr>
</thead>
<tbody><tr>
<td>Idle (default)</td>
<td>The item is not being interacted with. It may include a visual affordance (like a drag handle or cursor change) to suggest it can be dragged.</td>
</tr>
<tr>
<td>Focus</td>
<td>When the item receives keyboard focus, it should be clearly outlined or highlighted, just like any other interactive element.</td>
</tr>
<tr>
<td>Grabbed</td>
<td>The moment the drag starts, the item should visually change to communicate that it&#39;s being held or moved. This could include elevation, opacity change, outline, or ghosting.</td>
</tr>
<tr>
<td>Dragging</td>
<td>As the item is being dragged, it may leave a visual placeholder behind, become semi-transparent, or follow the cursor. Motion or shadow changes are also common here.</td>
</tr>
<tr>
<td>Dropped</td>
<td>When the item is dropped, it may animate into its new position or trigger a confirmation/final state. This reinforces that the action has been completed.</td>
</tr>
</tbody></table>
<h4>Drop area</h4>
<p><br>This indicates where an item can or cannot be dropped and provides feedback when an item is hovered over it. </p>
<table>
<thead>
<tr>
<th>State</th>
<th>Behavior</th>
</tr>
</thead>
<tbody><tr>
<td>Inactive (default)</td>
<td>The drop area is not being interacted with. It may have a subtle outline or indicator to suggest that it accepts drops.</td>
</tr>
<tr>
<td>Active</td>
<td>When a draggable item is hovered over the area, it should visually indicate that a drop is possible. This could be done with border color, background highlight, or label.</td>
</tr>
<tr>
<td>Invalid drop zone</td>
<td>If an item is dragged over a zone where it cannot be dropped, use a distinct visual state (e.g., red border, strikethrough, or “not allowed” icon) to indicate that it&#39;s not a valid target.</td>
</tr>
<tr>
<td>Drop confirmed</td>
<td>After a successful drop, the area might briefly flash, highlight, or animate to show the drop was accepted.</td>
</tr>
</tbody></table>
<h4>Optional enhancements</h4>
<p>These enhancements can enhance the experience when done accessibly. 
Announcement cues  Accompany state changes with ARIA live regions to announce them to screen reader users.</p>
<ul>
<li>Transitions and animations: Subtle movement or fading can help guide the eye during the drag and drop process—especially when rearranging items.</li>
<li>Undo: Visual feedback like a message bar offering an “Undo” can help users recover from accidental drops.</li>
</ul>
<h2>Developer recommendations</h2>
<ul>
<li>Libraries and frameworks: Utilize well-supported libraries like react-beautiful-dnd for React or SortableJS for vanilla JavaScript to simplify implementation.</li>
<li>State management: Use state management solutions like Redux or Context API to manage the state of draggable items and their positions.</li>
<li>Event handling: Implement event listeners for dragstart, dragover, drop, and dragend events. Ensure proper handling of these events to maintain a smooth user experience.</li>
<li>Testing: Conduct thorough testing across different devices and browsers. Include accessibility testing to ensure compliance with WCAG guidelines.</li>
<li>Performance optimization: Optimize rendering and state updates to prevent lag during drag and drop interactions. Use requestAnimationFrame for smooth animations.</li>
</ul>
<h2>Accessibility guidelines</h2>
<h4>Keyboard navigation</h4>
<p>Ensure all drag and drop actions can be performed using keyboard shortcuts. Provide clear focus indicators.
WCAG 2.1: Understanding Guideline 2.1: Keyboard Accessible</p>
<h4>Dragging movements</h4>
<p>For any action that involves dragging, provide a simple pointer alternative.
WCAG 2.2: Understanding Success Criterion 2.5.7: Dragging Movements</p>


Drag and drop allows users to select and move items on a screen.

Drag and drop

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
