Drag and drop

Users often need controls to reorder items within a group. Drag & drop functionality is a common pattern and is a solution to this challenge. The overall experience should be intuitive, provide visual feedback, and above all be accurate.

Drag and drop
When used effectively, drag & drop delights users by effectively communicating:
  • Which elements within an interface can be dragged
  • Where the interface anticipates a dragged element will be placed
  • Where the dragged element ended up within the group


Drag & drop is a useful pattern when:
  • A user must create or update an order within a group of items
  • Visually constructing content. Examples:
    • Moving images within a gallery
    • Moving blocks within a PageBuilder Editor layout area
    • Moving content elements within Composer
    • Moving content within a WebSked Collection

Arc Design System components that have drag & drop capabilities use this library. https://github.com/atlassian/react-beautiful-dnd https://docs.dndkit.com/

#Design considerations

The following design considerations should be implemented when using a drag & drop pattern.

#Visual indicator

Example of a visual indicator on a draggable item Items that can be dragged have the standard visual indicator.

#Drag hit zones

Examples of drag hit zones For items that can be dragged, hit zones are an important consideration. The hit zones for the draggable items depends on what is inside the item itself. If the item contains links, IconButtons, or other UI elements that have hover/click interactions, then the hit zone for drag should be contained to give room for other features. In the examples in the image above, the hit zones are denoted in red. When the user clicks and drags anywhere in that area, it will start the drag & drop. The hover cursor should also change to the grab cursor when the user enters the hit zone (red areas in the above example).


Cursor interactions for drag and drop When a user enters into a drag hit zone, the cursor should change to hint to the drag functionality. Items that can be dragged have a special cursor css on hover.
cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;
In some instances, the entire item may have this hover, and in other instances it may be appropriate to only have this hover style on the visual indicator itself.

#Dragging elements

Demo of an element being dragged When dragging an element, the item should receive $elevation400 and a special css cursor:
cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing;

#Item placement feedback

Demo of item placement feedback The front-end takes the size of the dragged element, and uses those dimensions to create a natural space the item can fit inside of.

#Accessibility considerations

The Arc Design System team recommends the drag & drop library React Beautiful DnD. Below is an excerpt of the accessibility features they deliver. When implementing a solution not using this library, consider implementing features that mirror this set to create parity with the rest of Arc’s drag & drop UX:
Copyright 2021 Arc XP