The Drag & Drop mechanism enables the user to shift elements, change a sorting order or put an element in a particular place.

The size of the Drag & Drop components depends on the basic type size used, which adapt to the viewport width in question. As such, the size of the components is flexible. They are available in a dark and a light version.

Draggable List

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
HTML
<ul class="aui-draggable-list">
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 1</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 2</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 3</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 4</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 5</li>
</ul>

Dropzone

The dropzone allows files to be uploaded intuitively. When shifting a file by means of Drag & Drop, the area in which it can be deposited can be graphically highlighted.

The dropzone should only be applied if Drag & Drop shifting of files is possible in the system.

Drop here
HTML
<div class="aui-dropzone">
  <div class="aui-dropzone__message">
    Drop here
  </div>
</div>
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Example

Don’ts

Excessively small drop zones should be avoided. 
Don’t place draggable lists against a red background.
Don’t place drop zones against a red background.