Mithilfe der Drag & Drop-Mechanik kann der Nutzer Elemente verschieben, die Reihenfolge einer Sortierung ändern oder ein Element an einem bestimmten Ort ablegen.

Die Größe der Drag & Drop-Komponenten ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Dementsprechend ist die Größe der Komponenten flexibel. Sie stehen in dunkler und heller Version zur Verfügung.

Draggable List

Elemente der sortierbaren Liste können in ihrer Platzierung zueinander verschoben werden. Bei Bewegung eines Eintrags werden mögliche Ablageorte grafisch gekennzeichnet.

  • 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

Die Dropzone ermöglicht es, Dateien auf intuitive Weise hochzuladen. Beim Verschieben einer Datei per Drag & Drop wird der Bereich, in dem sie abgelegt werden kann, grafisch hervorgehoben.

Die Dropzone sollte nur eingesetzt werden, wenn das Verschieben von Dateien per Drag & Drop im System möglich ist.

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

Anwendungsbeispiele

Don’ts

Zu kleine Dropzones sollten vermieden werden.
Drag & Drop-Komponenten nicht auf Rot platzieren.
Dropzones nicht auf Rot platzieren.