Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Drag and Drop

Drag and drop is a user interaction method where users click, hold, and move objects to new positions, simplifying interaction.

last modified: 08/06/2022 11:30:04


Users can move elements on the screen by dragging and dropping them, using a mouse, keyboard, or other input device.


Elements of the list can be shifted in terms of their positioning relative to each other. When an entry is moved, possible destinations are shown graphically.

  1. Default state
    State visible before click.

  2. Hover/focused state
    State visible when the cursor hovers the box. Cursor becomes a hand.

  3. Dragging state
    State indicates that the object is “grabbed”.

  4. Drop state
    State indicates the user where the box will go when he "drops" it.

  5. Disabled state
    State visible when no interraction is possible with the box. background and label are displayed but they are greyed out. A tooltip can be added to inform the reason of deactivation.


  1. Label

  2. Container

  3. Grab-handle icons
    The grab-handle icon communicates that drag–and–drop is available and provide a safe target to click and drag without activating other nearby controls. The user doesn't have to click exactly on the grab handle icon, but its purpose remains the same. In the default version, without checkbox, the user can click on the whole box to initiave the drag and drop.

  4. Outline
    The outline makes it clear what the status of the box is.

  5. Checkbox
    A box can also contain a checkbox. In this case, it's only the action icon that is clickable to initiate the drag and drop.
    More info about the checkboxes available here.


How it works?

  1. To initiate the interaction, users acquire an object using a mouse or touch gesture (such as a mouse click or, respectively, a long press).
  2. While keeping the object selected (e.g., by continuous pressure on the mouse button), the user then moves the pointing device (mouse, finger, etc.) to some desired target. This is the “drag” part of the operation.
  3. Finally, the user deselects the object — for example, by letting go of the mouse button. This is the “drop” area.

The outcome of all these steps may simply be that the object has been relocated.

System cursors.

System cursors indicate when an element is draggable. The system cursors will significantly improve discoverability of draggable elements.

  • The cursor appears on hover and indicates that drag–and–drop is available.
  • While clicking and holding, the drag–and–drop cursor changes to a closed glove to indicate that the item is grabbed.
last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 08/06/2022 11:30:04

Default drag and drop

  • Add aria-grabbed='false' and aria-haspopup='true' attributes to each list item.
  • Add tabindex='0' attribute to each list item to make them selectable with the keyboard.
  • Don't forget to translate aria-label='Draggable' attribute into your website language.
Disabled item

To disable dragging on a list item,

  • Add rs-disabled class to this rs-draggable-item list item.
  • Set draggable attribute to false .
  • Remove tabindex , aria-grabbed and aria-haspopup attributes.
  • Change aria-label attribute of child icon from 'Draggable' to 'Not draggable' . Don't forget to translate it into your website language.
  1. Name
  2. E-mail
  3. Role
  4. Actions


Add rs-draggable-neg class to rs-draggable container.

  1. Name
  2. E-mail
  3. Role
  4. Actions

Drag and drop with checkbox

Disabled item

Don't forget to add disabled attribute to disabled checkbox.

Replace rs-draggable-label by rs-draggable-form and put a checkbox inside.


Add rs-draggable-neg class to rs-draggable container.
Add rs-form-neg class to rs-draggable-form .


How to trigger the js

Each time you add Drag and Drop to the page, you have to call this JS: inception.draggable(CONTEXT);

CONTEXT refers to document or html element parent to data-draggable.

last modified: 28/02/2024 15:30:08

Configuration metadata (DSDragAndDropDirective)

Selector: [dsDragAndDrop]

Class: DSDragAndDropDirective

Use case example





Name Type Description
dropped EventEmitter Emits when drop



Configuration metadata (DSDraggableItemDirective)

Selector: [dsDraggableItem]

Class: DSDraggableItemDirective

Use case example



Name Type Default Required Description
dragId string undefined Yes Unique id of the component
itemDisabled boolean false No Enables/Disables the component