Verbesserung des persönlichen Finanztrackers mit Drag-and-Drop

Einführung

In diesem Lab geht Alex' Reise durch die Entwicklung des persönlichen Finanztrackers in eine fortgeschrittene Phase, wobei der Fokus auf der Verbesserung der Interaktivität der Anwendung durch raffinierte Ereignisbehandlungstechniken liegt. Die Szene spielt sich in einer Brainstormingsitzung bei der Tech-Startup ab, wo Alex vorschlägt, eine Drag-and-Drop-Funktion hinzuzufügen, um Finanzaufzeichnungen neu zu ordnen. Dieses ehrgeizige Ziel soll den Benutzern einen intuitiven Weg bieten, ihre Aufzeichnungen zu organisieren, was die flüssige Natur der persönlichen Finanzverwaltung widerspiegelt. Dies erfordert, dass Alex fortgeschrittene DOM-Ereignisse untersucht und Elemente auf eine visuell ansprechende und benutzerfreundliche Weise manipuliert.

In diesem Lab wirst du tief in die fortgeschrittene Ereignisbehandlung in JavaScript eintauchen und lernen, wie du die Drag-and-Drop-Funktionalität implementierst, um Elemente in einer Liste dynamisch neu zu ordnen. Diese Fähigkeit ist unschätzbarkeit für das Erstellen moderner, interaktiver Webanwendungen, bei denen die Benutzererfahrung im Vordergrund steht.

Wissenspunkte:

Drag and Drop API (dragstart, dragover, drop)

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/dom_select -.-> lab-290731{{"Verbesserung des persönlichen Finanztrackers"}} javascript/dom_manip -.-> lab-290731{{"Verbesserung des persönlichen Finanztrackers"}} javascript/event_handle -.-> lab-290731{{"Verbesserung des persönlichen Finanztrackers"}} end

DragEvent

DragEvent ist eine Ereignisschnittstelle zur Behandlung von Drag-and-Drop-Operationen. Sie erweitert von MouseEvent, sodass sie alle Mausereignisseigenschaften sowie einige zusätzliche Eigenschaften für Drag-and-Drop-Operationen enthält.

Einrichten von Drag and Drop

Um ein Element ziehbar zu machen, musst du sein Attribut draggable auf true setzen. Anschließend kannst du Ereignislistener hinzufügen, um die Drag-and-Drop-Ereignisse zu behandeln.

<div id="drag-item" draggable="true">Zieh mich</div>

oder

setAttribute("draggable", true);

Behandeln von Drag-and-Drop-Ereignissen

Drag-and-Drop-Operationen beinhalten mehrere Ereignisse, darunter dragstart, drag, dragend, dragenter, dragover, dragleave und drop.

dragstart: Wird ausgelöst, wenn der Benutzer beginnt, ein Element zu ziehen.
drag: Wird fortlaufend ausgelöst, während ein Element gezogen wird.
dragend: Wird ausgelöst, wenn die Drag-and-Drop-Operation endet.

Beispielsweise das Hinzufügen von Ereignislistenern zu einem Element:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Drag and Drop Example</title>
    <style>
      #drag-item {
        width: 100px;
        height: 100px;
        background-color: rgb(87, 196, 238);
        color: white;
        line-height: 100px;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;
      }
      #drop-zone {
        width: 200px;
        height: 100px;
        background-color: rgb(214, 210, 210);
        line-height: 100px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="drag-item" draggable="true">Zieh mich</div>
    <div id="drop-zone">Ziehe hier herunter</div>

    <script>
      const dragItem = document.getElementById("drag-item");

      dragItem.addEventListener("dragstart", function (event) {
        // Setze die Drag-Daten
        event.dataTransfer.setData(
          "text/plain",
          "Dies sind die Daten, die gezogen werden"
        );
      });

      dragItem.addEventListener("dragend", function (event) {
        // Operationen nach dem Ende des Ziehens
        console.log("Ziehen beendet");
      });
    </script>
  </body>
</html>

Behandeln von Drop

Um es einem Element zu ermöglichen, fallen gelassene Elemente zu empfangen, musst du die dragover- und drop-Ereignisse behandeln.

Beispiel:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Drag and Drop Example</title>
    <style>
      #drag-item {
        width: 100px;
        height: 100px;
        background-color: rgb(87, 196, 238);
        color: white;
        line-height: 100px;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;
      }
      #drop-zone {
        width: 200px;
        height: 100px;
        background-color: rgb(214, 210, 210);
        line-height: 100px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="drag-item" draggable="true">Zieh mich</div>
    <div id="drop-zone">Ziehe hier herunter</div>

    <script>
      // JavaScript-Code hier
      const dragItem = document.getElementById("drag-item");
      const dropZone = document.getElementById("drop-zone");

      // Drag-start-Ereignis
      dragItem.addEventListener("dragstart", function (event) {
        event.dataTransfer.setData("text/plain", "Drag Erfolgreich");
      });

      // Drag-over-Ereignis
      dropZone.addEventListener("dragover", function (event) {
        event.preventDefault(); // erforderlich, um das Ablegen zu ermöglichen
      });

      // Drop-Ereignis
      dropZone.addEventListener("drop", function (event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text/plain");
        console.log("Gefallene Daten:", data);
        dropZone.textContent = `Gefallen: ${data}`;
      });
    </script>
  </body>
</html>

Implementieren von Drag-and-Drop für die Neuanordnung

In diesem Schritt wirst du zusammen mit Alex den persönlichen Finanztracker verbessern, indem du den Benutzern die Möglichkeit gibst, ihre Finanzaufzeichnungen mit Drag-and-Drop neu zu ordnen. Dies erfordert das Erfassen mehrerer Ereignisse: dragstart, dragover, drop und die sichere Aktualisierung des DOM entsprechend.

Zunächst modifiziere die Funktion renderFinancialRecords in script.js, um jede Aufzeichnung ziehbar zu machen und diese Ereignisse zu behandeln:

document.addEventListener("DOMContentLoaded", function () {
  const renderRecords = () => {
    recordsList.innerHTML = "";
    records.forEach((record, index) => {
      const recordElement = document.createElement("div");
      recordElement.setAttribute("draggable", true);
      recordElement.classList.add("record-item");
      recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
      recordElement.addEventListener("dragstart", (e) => {
        draggedIndex = index;
      });
      recordElement.addEventListener("dragover", (e) => {
        e.preventDefault();
      });
      recordElement.addEventListener("drop", (e) => {
        const temp = records[draggedIndex];
        records[draggedIndex] = records[index];
        records[index] = temp;
        saveRecords();
      });
      recordsList.appendChild(recordElement);
    });
  };
});

Diese Implementierung ermöglicht es Benutzern, eine Finanzaufzeichnung zu ziehen und an einer neuen Position in der Liste abzulegen, wobei die Anwendung automatisch die Reihenfolge der Aufzeichnungen aktualisiert.

✨ Lösung prüfen und üben

Zusammenfassung

In diesem Lab hat deine Reise mit Alex zur erfolgreichen Implementierung eines fortgeschrittenen Features im persönlichen Finanztracker geführt: der Drag-and-Drop-Funktionalität zur Neuordnung von Finanzaufzeichnungen. Diese Verbesserung verbessert nicht nur die Benutzbarkeit der Anwendung, sondern führt dich auch in die komplexe Ereignisbehandlung und die dynamische Aktualisierung der Benutzeroberfläche in der Webanwendung ein. Durch diesen Prozess hast du wertvolle Erkenntnisse gewonnen, um interaktive und intuitive Webanwendungen zu erstellen, die auf komplexe Weise auf Benutzeraktionen reagieren.

Das Erkunden von fortgeschrittenen Ereignisbehandlungstechniken wie Drag-and-Drop hat dein Toolset als Webdesigner erweitert und ermöglicht, komplexere UI/UX-Herausforderungen anzugehen. Dieses Wissen ist entscheidend für das Erstellen moderner Webanwendungen, die den hohen Erwartungen heutiger Benutzer an Interaktivität und Reaktionsfähigkeit entsprechen.