JavaScript ist eine der beliebtesten Programmiersprachen, die mit mehr als 24 Frameworks und rund 84 Bibliotheken ausgestattet ist. Sie ist die einzige Programmiersprache, die von allen Browsern von Natur aus unterstützt wird. Zudem unterstützt die Sprache die dynamische Typisierung und eignet sich hervorragend für Rendering und Animationen. Sie können JavaScript nutzen, um interaktives Verhalten im Frontend hinzuzufügen, das Backend zu steuern, Web- und Mobilanwendungen zu erstellen und vieles mehr. Die Möglichkeit, Effekte zu jeder Website hinzuzufügen und sie anpassbar zu machen, macht die Sprache weltweit zu einem Favoriten unter Entwicklern.
In dieser Anleitung werden wir Sie durch die Schritte zur Erstellung von Drag-and-Drop-Elementen mit reinem Vanilla JavaScript führen. Darüber hinaus werden wir einen Schritt weiter gehen und eine „Morning Scheduler“-App mithilfe der HTML Drag and Drop API-Event-Handler erstellen.
Voraussetzungen
Um diesem Tutorial folgen zu können, müssen Sie über Folgendes verfügen:
Schritt 1: Ein neues Projekt erstellen
Beginnen Sie mit der Erstellung eines Containers mit zwei Kindelementen. Wir werden das erste Kindelement zum Ziehen und das zweite Kindelement zum Speichern der gezogenen Elemente verwenden.
|
Hinweis: In diesem Tutorial betrachten wir Container als Speicher, um alle gezogenen Elemente aufzubewahren. Einfach ausgedrückt werden alle aus dem ersten Kindelement gezogenen Elemente im zweiten Kindelement abgelegt. |
|
1 |
$ mkdir drag-and-drop-demo |
Verwenden Sie als Nächstes den cd-Befehl, um das Verzeichnis in den Ordner drag-and-drop-demo Ordner zu wechseln:
|
1 |
$ cd drag-and-drop-demo |
Schritt 2: Erste Einrichtung
In diesem Tutorial werden wir HTML-, CSS- und JavaScript-Dateien erstellen und diese miteinander verbinden. Benennen Sie die Dateien zunächst als index.html, styles.css und scripts.js (jeweils).
Fügen Sie als Nächstes den Titel „My Morning Planner“ in der index.html -Datei hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Morning Planner</title> </head> <body> </body> </html> |
Verknüpfen Sie als Nächstes CSS und fügen JavaScript zu HTML hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>My Morning Planner</title> </head> <body> </body> </html> |
Fügen Sie als Nächstes die folgenden Codezeilen in den <body>-Tags ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Mein Morgenplaner</title> </head> <body> <div class="container"> <h1><center>MEIN MORGENPLANER</center></h1> <h2 class="draggable" draggable="true">Ins Fitnessstudio gehen</h2> <h2 class="draggable" draggable="true">30 Minuten lesen</h2> <h2 class="draggable" draggable="true">Haferflocken zubereiten</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Kalt duschen</h2> <h2 class="draggable" draggable="true">Meinen Tag beginnen</h2> </div> </body> </html> |
Speichern und schließen Sie die index.html-Datei. Versuchen Sie danach, die index.html-Datei in Ihrem Browser zu öffnen, und Sie werden sehen, wie sich eine Seite öffnet:
Als Nächstes wollen wir unser index.html mit CSS gestalten und ansprechend aussehen lassen.
Schritt 3: Gestaltung mit CSS
Fügen Sie als Nächstes Stile für alle Elemente hinzu, die wir in unserer index.html-Datei eingefügt haben:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
Versuchen Sie, die index.html-Datei in Ihrem Browser zu öffnen und das Ergebnis zu sehen:
Obwohl wir die Strukturierung abgeschlossen und Stile hinzugefügt haben, sind die Elemente immer noch statisch. Das bedeutet, dass wir Elemente nicht bewegen oder scrollen können, bis wir ihnen dynamische Funktionen hinzufügen. Im nächsten Schritt führen wir JavaScript und dynamische Verhaltensweisen ein.
Schritt 4: Einführung in JavaScript
In diesem Schritt werden wir JavaScript einführen und alle Drag-Elemente funktionsfähig machen. Richten Sie in der JS-Datei die Elemente ein, die wir benötigen werden. Lassen Sie uns draggable und containers definieren, um Elemente zu ziehen bzw. abzulegen.
Fügen Sie die zwei Codezeilen in der scripts.js-Datei hinzu:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Richten Sie als Nächstes alle Event-Listener ein. Beginnen Sie mit dem Hinzufügen des “dragstart”-Elements als ersten Event-Listener, um add zur Klassenliste hinzuzufügen. Fügen Sie in ähnlicher Weise das “dragend”-Element als zweiten Event-Listener hinzu, um remove aus der Klassenliste zu entfernen.
Fügen Sie die folgenden EventListeners in Ihrer scripts.js-Datei hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
Fügen Sie als Nächstes den “dragover” EventListener für das Hovern und Bewegen unserer Elemente hinzu. Setzen Sie das aktuelle draggable-Element mithilfe von querySelector und hängen Sie dann das ziehbare Element an den aktuellen Container an:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Standardmäßig ist das Ablegen innerhalb eines Elements deaktiviert. Verwenden Sie e.preventDefault, um es zu aktivieren:
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
Erstellen Sie als Nächstes ein Element, um die Mauspositionierung zu bestimmen. Beginnen Sie mit dem Erstellen einer Funktion getDragAfterElement, die zwei Parameter entgegennimmt. Der erste ist ein container und der zweite Parameter y kümmert sich um die vertikale Position der Maus. Verwenden Sie nun die Funktion querySelectorAll, um unsere ziehbaren Elemente abzurufen. Definieren Sie draggableElements für alle ziehbaren Elemente innerhalb des Containers:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Rufen Sie als Nächstes eine reduce-Funktion auf, die die Liste der ziehbaren Elemente durchläuft und auch das einzelne Element nach dem Mauszeiger bestimmt. Als Nächstes return Sie die reduce-Funktion zurück, indem Sie das erste Element als closest und das zweite als child hinzufügen. Setzen Sie außerdem den offset gleich und fügen Sie Bedingungen hinzu.
Fügen Sie die folgenden Codezeilen in die scripts.js-Datei ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
Fügen Sie dies in die scripts.js -Datei ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
Jetzt haben wir die notwendigen Vorbereitungen getroffen. Öffnen Sie Ihren Browser und führen Sie index.html in Ihrem Browser aus. Sie sehen die Seite „My Morning Scheduler“ mit Optionen zum Drag-and-Drop. Die weiße Linie in der Mitte fungiert als Brücke, um zwischen den bereits erledigten Aufgaben und den noch zu erledigenden Aufgaben zu unterscheiden:
Fazit
Drag-and-Drop ist eine hervorragende Option für moderne Websites. In dieser Anleitung haben wir eine Handvoll Event-Handler verwendet, um das Tutorial für Anfänger einfach zu gestalten. Insgesamt gibt es acht Event-Handler, und wir ermutigen Sie, diese im weiteren Verlauf zu nutzen. Sobald Sie sich mit den Funktionen und dem in diesem Tutorial verwendeten Code vertraut gemacht haben, können Sie tiefer in JavaScript-Themen wie jQuery eintauchen und mit dem Erkunden beginnen. Sie können auch versuchen, eine To-Do-App oder einen wöchentlichen Fortschritts-Tracker mithilfe von JavaScript-Datums- und Zeitfunktionen, und andere Anwendungen unter Verwendung der soeben gelernten Konzepte zu erstellen.
Um mehr über JavaScript und Webentwicklungsthemen zu erfahren, lesen Sie diese Ressourcen in unserem Blog:
- JavaScript-Tools: localStorage und sessionStorage
- Arbeiten mit JavaScript: Was sind Objekte
- Ein Tutorial zum Arbeiten mit JSON in JavaScript
- Arbeiten mit JavaScript: Wie Klassen funktionieren
Fröhliches Computing!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.