It’s #FrontendFriday – Drag&Drop leicht gemacht

Drag&Drop

Wenn ich eine Datei auf meinem Laptop in einen Ordner verschieben möchte, dann nehme ich diese per Mausklick, ziehe diese in meinen gewünschten Ordner und lege die Datei dann dort ab – ganz einfach!

Das „Ziehen und Ablegen“ der Datei (auch: Drag&Drop genannt) wird nicht nur auf dem Betriebssystem des Computers benutzt, sondern auch auf Webseiten. Meistens wird dort nur eine sogenannte „Dropzone“ angeboten, ein Bereich, in den Dateien abgelegt werden können, um diese dann später hochzuladen. Ich zeige euch heute mehrere Beispiele, wie Drag&Drop genutzt werden kann und wie einfach die Implementierung in Angular dafür ist.

Liste neu sortieren

Nehmen wir an, ihr habt eine Liste und ihr möchtet diese selbst anordnen können.

Via Drag&Drop kein Problem:

To Dos abschließen mit Stil

Viele von euch kennen sie garantiert: To Do-Listen. Meistens werden die To Dos abgehakt bzw. entfernt. Eine coolere Variante, um diese To Dos abzuschließen und seinen Fortschritt zu sehen, ist die To Dos in eine „Complete“ oder „Abgeschlossen“ Liste zu schieben, wie hier:

PS: Die abgeschlossenen To Dos können auch wieder zurückgeschoben werden, falls etwas doch noch nicht erledigt ist :-)

Das waren nur einige Beispiele, auf dieser Seite findet ihr hierzu sehr viel mehr: https://material.angular.io/cdk/drag-drop/overview

Ist doch bestimmt viel Code…

..nein ist es nicht ! :-) Wie am Anfang angedeutet, wird das Drag&Drop vom Component Dev Kit (CDK) angeboten.

Um das Modul in einem Angular Projekt zu benutzen, muss es zunächst installiert werden:
npm install @angular/cdk
Und danach noch in euer Angular Projekt eingebunden werden.

Nach diesen Schritten kann es verwendet werden und um euch zu zeigen, dass es sich lohnt, dieses Paket zu installieren, zeige ich euch den Quellcode aus dem ersten Beispiel:

HTML

<div class="example-list">
    <div class="example-box">{{movie}}</div>
</div>

import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

/**
 * @title Drag&Drop sorting
 */
@Component({
  selector: 'cdk-drag-drop-sorting-example',
  templateUrl: 'cdk-drag-drop-sorting-example.html',
  styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi',
    'Episode IX – The Rise of Skywalker'
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }
}