Skip to content

Drag and drop


Drag and drop is a component that allows user to move elements within the interface, changing their order and sometimes their properties.


One common use case is reordering columns in a table, using dropdowns known as "Table settings controls".

The component imitates the physical dragging of objects, and two essential considerations for this are:

  • Clearly indicating which interface elements can be dragged and where.
  • Providing visual cues during dragging to show that the element is being moved and where it can be placed.

Component composition

DnD is a container that wraps the necessary area for drag and drop functionality. The DropZone is where the element can be dropped, and the Draggable is the element you can move.


Icon for identification of the possibility to drag the object

When hovering over a draggable element, it's recommended to display the MoveAlt icon, which should use the --icon-secondary-neutral token for its color.

Shadow of the object which can be dragged

--box-shadow-dnd token is used for the shadow.

Area for dragging

The area for dragging is where you can click and hold the mouse or use the keyboard to move a large object, like a card or table row. We recommend using the dotted pattern that appears when user hovers over the area or use the Tab key to navigate to the element. This pattern can be placed both horizontally, as in the case of cards, and vertically, as in table rows.

Area for dropping

By default, the element's placement area is marked with a dashed border. If user hovers over this area, its styles should remain unchanged to avoid giving the impression that it is clickable.

Use border: 1px dashed var(--border-primary) for border styles.

Area highlighting

When the object is dragged to the area where the element can be placed, area must be highlighted.

Use --bg-primary-neutral-hover token for background-color and border: 1px dashed var(--border-primary) for border styles.

Where to use

Where to use drag and drop component
ComponentAppearance example



When dragging either a clickable or non-clickable element, a long click on any part of the element will change the cursor to a "move" cursor, indicating that dragging has begun.

States of draggable element

When dragging, the axis isn’t restricted, allowing the element to be moved anywhere on the page but only added to certain areas.

States of draggable element
StateAppearance exampleDescription
DefaultDon’t show the MoveAlt icon and pattern with dots in default state.
Hover If the element is hovered over, a MoveAlt icon or pattern with dots is displayed, indicating that the component can be moved. If the MoveAlt icon is hovered over, the cursor changes to move.
draggingThe dragged object changes its box-shadow to the --box-shadow-dnd token.
no-dropIf the drop zone under the dragged object is unavailable, the cursor changes to not-allowed.

States of droppable area

States of droppable area
StateAppearance exampleDescription
DefaultBy default, the area where the element can be placed is marked with a dashed border. You can place text inside this area to describe what can be dropped there, using the secondary text color (--text-secondary) that is appropriate for the context.
HoverThe border color of the area where an object can be dragged isn’t changed when hovered over.
dragging Hovering over the area where an element can be dropped changes its color. When dragging an object in a list of similar objects, they are separated, and the drop zone changes the background color to --bg-secondary-neutral-hover.
no-dropIf the drop zone under the dragged object is unavailable, the cursor changes to not-allowed.

Usage in UX/UI

This component imitates physically dragging objects, so keep the following in mind when implementing it:

  • Visually indicate that the element is draggable using icons or text.
  • Display the area where the element can be placed.
  • Avoid placing the draggable element and its drop area too far apart.


Use appropriate cursors such as move, grab, or grabbing when interacting with draggable elements.

Note that short and long clicks have different meanings, with long clicks used for clickable draggable objects.

Apply the required styles to show that an element is being dragged during the DragEvent.

Released under the MIT License.

Released under the MIT License.