AngularJS - Drag-Anwendung

Einführung in Drag und Drop in AngularJS

Hallo da draußen, zukünftige AngularJS-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der Drag und Drop-Anwendungen mit AngularJS. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich begeistert, dich durch dieses Abenteuer zu führen, selbst wenn du noch nie eine Zeile Code geschrieben hast. Keine Sorge – wir gehen Schritt für Schritt vor, und bevor du es weißt, wirst du interaktive Webanwendungen wie ein Profi erstellen!

AngularJS - Drag Application

Was ist Drag und Drop?

Bevor wir uns in den Code stürzen, lassen Sie uns darüber sprechen, was Drag und Drop überhaupt bedeutet. Stell dir vor, du räumst deinen Schreibtisch auf. Du klickst auf eine Datei, hältst die Maustaste gedrückt, bewegst sie an eine neue Stelle und löse die Maustaste. Das ist Drag und Drop in Aktion! Es ist eine Möglichkeit, Benutzeroberflächen intuitiver und interaktiver zu gestalten.

Einrichtung unserer AngularJS-Umgebung

Um mit unserer Drag und Drop-Anwendung zu beginnen, müssen wir zuerst unsere AngularJS-Umgebung einrichten. Keine Sorge, wenn das kompliziert klingt – es ist einfacher als ein Peanut-Butter-Sandwich zu machen!

Schritt 1: AngularJS-Bibliothek einbinden

Zuerst müssen wir die AngularJS-Bibliothek in unsere HTML-Datei einbinden. Wir können dies tun, indem wir die folgende Zeile in den <head>-Bereich unserer HTML-Datei einfügen:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Diese Zeile lädt die AngularJS-Bibliothek von den Servern von Google. Es ist, als бы wir eine Pizza bestellten – wir sagen dem Browser, dass er AngularJS für uns holen soll!

Schritt 2: Unsere AngularJS-App erstellen

Als nächstes müssen wir unsere AngularJS-App erstellen. Wir tun dies, indem wir die ng-app-Direktive in unsere HTML-Datei einfügen:

<body ng-app="dragApp">
<!-- Unser App-Inhalt kommt hier hin -->
</body>

Dies sagt AngularJS, "Hey, alles innerhalb dieses <body>-Tags ist Teil unserer App!"

Erstellung unserer Drag und Drop-Anwendung

Nun, da wir unsere Umgebung eingerichtet haben, lassen uns mit der Erstellung unserer Drag und Drop-Anwendung beginnen. Wir werden eine einfache Liste erstellen, in der Elemente gezogen und neu angeordnet werden können.

Schritt 1: Controller erstellen

Zuerst müssen wir einen Controller erstellen. Stell dir vor, ein Controller ist das Gehirn unserer Anwendung. Es ist der Ort, an dem wir das Verhalten unserer App definieren.

angular.module('dragApp', [])
.controller('DragController', function($scope) {
$scope.items = ['Element 1', 'Element 2', 'Element 3', 'Element 4'];
});

In diesem Code erstellen wir eine Modul namens 'dragApp' und einen Controller namens 'DragController'. Wir definieren auch ein Array von Elementen, die wir ziehen und ablegen können.

Schritt 2: HTML einrichten

Nun richten wir unsere HTML-Datei so ein, dass sie diese Elemente anzeigt:

<div ng-controller="DragController">
<ul>
<li ng-repeat="item in items" draggable="true">{{item}}</li>
</ul>
</div>

Hier verwenden wir die ng-controller-Direktive, um unser HTML mit dem Controller zu verbinden, den wir gerade erstellt haben. Die ng-repeat-Direktive erstellt ein Listenelement für jedes Element in unserem Array. Das draggable="true"-Attribut macht jedes Element ziehbar.

Schritt 3: Drag und Drop-Funktionalität implementieren

Nun kommt der spaßige Teil – die Implementierung der tatsächlichen Drag und Drop-Funktionalität! Wir müssen einige Ereignisandler in unseren Controller hinzufügen:

angular.module('dragApp', [])
.controller('DragController', function($scope) {
$scope.items = ['Element 1', 'Element 2', 'Element 3', 'Element 4'];

$scope.dragStart = function(e, index) {
e.dataTransfer.setData('text/plain', index);
};

$scope.drop = function(e, index) {
e.preventDefault();
var data = e.dataTransfer.getData('text');
var fromIndex = parseInt(data);
var toIndex = index;
$scope.items.splice(toIndex, 0, $scope.items.splice(fromIndex, 1)[0]);
$scope.$apply();
};

$scope.allowDrop = function(e) {
e.preventDefault();
};
});

Lassen Sie uns das aufschlüsseln:

dragStart: Diese Funktion wird aufgerufen, wenn wir mit dem Ziehen eines Elements beginnen. Sie speichert den Index des Elements, das wir ziehen.
drop: Diese Funktion wird aufgerufen, wenn wir ein Element ablegen. Sie verschiebt das Element von seiner alten Position an die neue Position im Array.
allowDrop: Diese Funktion ermöglicht das Ablegen, indem sie das Standardverhalten verhindert.

Schritt 4: HTML aktualisieren

Schließlich aktualisieren wir unsere HTML-Datei, um diese neuen Funktionen zu verwenden:

<div ng-controller="DragController">
<ul>
<li ng-repeat="item in items" draggable="true"
ng-dragstart="dragStart($event, $index)"
ng-drop="drop($event, $index)"
ng-dragover="allowDrop($event)">
{{item}}
</li>
</ul>
</div>

Wir haben drei neue Attribute zu unseren <li>-Elementen hinzugefügt:

ng-dragstart: Ruft unsere dragStart-Funktion auf, wenn wir mit dem Ziehen eines Elements beginnen.
ng-drop: Ruft unsere drop-Funktion auf, wenn wir ein Element ablegen.
ng-dragover: Ruft unsere allowDrop-Funktion auf, wenn wir über ein Element ziehen.

Schlussfolgerung

Und вот es ist, Leute! Wir haben eine einfache Drag und Drop-Anwendung mit AngularJS erstellt. Du kannst jetzt Elemente in der Liste ziehen und neu anordnen. quite cool, oder?

Denke daran, das Lernen zu programmieren ist wie das Fahrradfahren zu lernen. Am Anfang mag es wackelig sein, aber mit Übung wirst du很快 zoomen können. Bleib experimentierfreudig, bleib neugierig und vor allem, habe Spaß!

Hier ist eine Tabelle, die die Hauptmethoden zusammenfasst, die wir in unserer Anwendung verwendet haben:

Methode	Beschreibung
dragStart	Handhabt den Beginn einer Ziehbewegung
drop	Handhabt das Ablegen-Ereignis, sortiert Elemente neu
allowDrop	Ermöglicht das Ablegen, indem das Standardverhalten verhindert wird

Frohes Coden und möge der Angular mit dir sein!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - Suchregisterkarte

Nächstes Tutorial:

AngularJS - Warenkorb-Anwendung