Ready

Draggable List

A sortable list that lets people rearrange items through direct manipulation. Drag handles make reorderable content easy to recognize, while the list preserves clear item structure and feedback throughout the interaction.

Ready

Draggable List

A sortable list that lets people rearrange items through direct manipulation. Drag handles make reorderable content easy to recognize, while the list preserves clear item structure and feedback throughout the interaction.

Anatomy

  1. List Header: Required. Used as a label for the draggable list.

  2. List Item: Required. Used to show the various items on the list.

States

  1. Default

  2. Hover

  3. Drag

Best Practices

1

Confirm users expect it

Dragging is physically demanding and can be inefficient, imprecise, and error-prone over long distances. Understand the users’ mental model of the action so you know they expect to use it, and observe in usability tests whether they try to drag (without asking them about it directly).

2

Try to provide single pointer alternative

Any functionality that uses dragging must also be achievable with a single pointer without dragging, unless dragging is essential. This is a requirement according to WCAG 2.2. Alternatives such as up/down buttons or a move menu work well.

3

Define the consequence

Does reordering change priority, execution sequence, display order for others, or just personal arrangement? Users should be able to tell what moving an item will change.

4

Nested scrolling

Check that dragging in a scrollable panel inside a scrollable page scrolls the right container, and that auto-scroll works near the edges.

5

Sorting and filtering

When a sort is applied, either disable manual reordering or switch to a “Custom order” sort mode the moment someone drags. When the list is filtered, decide what a move means: is it relative to the visible items or to the full list? Disabling dragging while a filter is active is a common practice.

More

Additional Reading

  1. Drag–and–Drop: How to Design for Ease of Use https://www.nngroup.com/articles/drag-drop/

  2. Dragging Movements (Level AA) https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements

  3. Atlassian Design System: Pragmatic drag and drop, Design guidelines https://atlassian.design/components/pragmatic-drag-and-drop/design-guidelines

  4. Apple Human Interface Guidelines: Drag and drop https://developer.apple.com/design/human-interface-guidelines/drag-and-drop

© 2026 Basis Technologies
© 2026 Basis Technologies
© 2026 Basis Technologies