11 VIEWS

It’s #FrontendFriday – Drag&Drop leicht gemacht

10.07.2020

Es ist #FrontendFriday und heute zeige ich euch wie einfach ihr Drag&Drop in Angular implementieren könnt mit CDK: Drag&Drop. So einfach funktioniert es…

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 dafür ist in Angular.

 

Liste neu sortieren

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

Via Drag&Drop kein Problem:

Klicken Sie auf den unteren Button, um den Inhalt von stackblitz.com zu laden.

Inhalt laden

 

Todos abschließen mit Stil

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

Klicken Sie auf den unteren Button, um den Inhalt von stackblitz.com zu laden.

Inhalt laden

PS: Die abgeschlossenen Todos 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 eingebunden werden in euer Angular Projekt.

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


TS

 

Das war es, und so wenig code ist es auch bei den anderen Beispielen :-) Wie ihr seht bietet euch das Modul HTML Elemente an um Drag&Drop zu ermöglichen, zusätzlich aber noch Funktion wie moveItemInArray um euch sogar die Arbeit abzunehmen die Daten selbst bearbeiten zu müssen die der Nutzer ändert durch seien Interaktionen.

 

Fazit

Drag&Drop ermöglicht es dem Nutzer der Website oder Anwendung Elemente zu verschieben und dort zu platzieren wo er möchte. Diese Funktion lässt sich dank dem Modul von Angular sehr einfach implementieren und spart somit wertvolle Zeit.

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.