Amélioration du logiciel de suivi des finances personnelles avec la glisser-déposer

Introduction

Dans ce laboratoire, le parcours d'Alex dans le développement du logiciel de suivi des finances personnelles entre dans une étape avancée, en mettant l'accent sur l'amélioration de l'interactivité de l'application grâce à des techniques sophistiquées de gestion d'événements. La scène est mise dans une session de brainstorming au sein de la startup technologique, où Alex propose d'ajouter une fonctionnalité de glisser-déposer pour réordonner les enregistrements financiers. Cet objectif ambitieux vise à offrir aux utilisateurs un moyen intuitif d'organiser leurs enregistrements, reflétant la nature fluide de la gestion des finances personnelles. Pour y arriver, Alex doit explorer les événements DOM avancés et manipuler les éléments de manière à être à la fois visuellement attrayante et conviviale pour l'utilisateur.

Dans ce laboratoire, vous plongerez profondément dans la gestion avancée d'événements en JavaScript, en apprenant à implémenter la fonctionnalité de glisser-déposer pour réordonner dynamiquement les éléments dans une liste. Cette compétence est précieuse pour créer des applications web modernes et interactives qui donnent la priorité à l'expérience utilisateur.

Points de savoir:

API de glisser-déposer (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{{"Amélioration du logiciel de suivi des finances personnelles"}} javascript/dom_manip -.-> lab-290731{{"Amélioration du logiciel de suivi des finances personnelles"}} javascript/event_handle -.-> lab-290731{{"Amélioration du logiciel de suivi des finances personnelles"}} end

DragEvent

DragEvent est une interface d'événement pour gérer les opérations de glisser-déposer. Elle hérite de MouseEvent, donc elle inclut toutes les propriétés d'événement de souris plus quelques propriétés supplémentaires spécifiques aux opérations de glisser-déposer.

Configuration de la glisser-déposer

Pour rendre un élément déplaçable, vous devez définir son attribut draggable sur true. Ensuite, vous pouvez ajouter des écouteurs d'événements pour gérer les événements de glisser-déposer.

<div id="drag-item" draggable="true">Drag me</div>

setAttribute("draggable", true);

Gestion des événements de glisser-déposer

Les opérations de glisser-déposer impliquent plusieurs événements, notamment dragstart, drag, dragend, dragenter, dragover, dragleave et drop.

dragstart: Démarré lorsque l'utilisateur commence à déplacer un élément.
drag: Démarré en continu tandis qu'un élément est déplacé.
dragend: Démarré lorsque l'opération de glisser-déposer se termine.

Par exemple, Ajout d'écouteurs d'événements à un élément:

<!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">Drag me</div>
    <div id="drop-zone">Drop here</div>

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

      dragItem.addEventListener("dragstart", function (event) {
        // Définir les données de glissement
        event.dataTransfer.setData(
          "text/plain",
          "This is the data being dragged"
        );
      });

      dragItem.addEventListener("dragend", function (event) {
        // Opérations après la fin du glissement
        console.log("Drag ended");
      });
    </script>
  </body>
</html>

Gestion du déplacement

Pour permettre à un élément de recevoir des éléments déplacés, vous devez gérer les événements dragover et drop.

Par exemple:

<!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">Drag me</div>
    <div id="drop-zone">Drop here</div>

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

      // Événement de début de glissement
      dragItem.addEventListener("dragstart", function (event) {
        event.dataTransfer.setData("text/plain", "Drag Successful");
      });

      // Événement de survol de déplacement
      dropZone.addEventListener("dragover", function (event) {
        event.preventDefault(); // Nécessaire pour autoriser le déplacement
      });

      // Événement de déplacement
      dropZone.addEventListener("drop", function (event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text/plain");
        console.log("Dropped data:", data);
        dropZone.textContent = `Dropped: ${data}`;
      });
    </script>
  </body>
</html>

Mise en œuvre de la glisser-déposer pour le réordonnancement

Dans cette étape, vous et Alex allez améliorer le logiciel de suivi des finances personnelles en ajoutant la possibilité pour les utilisateurs de réordonner leurs enregistrements financiers en utilisant la glisser-déposer. Cela implique de capturer plusieurs événements : dragstart, dragover, drop, et de s'assurer que le DOM est mis à jour en conséquence.

Tout d'abord, modifiez la fonction renderFinancialRecords dans script.js pour rendre chaque enregistrement déplacable et pour gérer ces événements :

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);
    });
  };
});

Cette implémentation permet aux utilisateurs de déplacer un enregistrement financier et de le déposer dans une nouvelle position dans la liste, l'application mettant automatiquement à jour l'ordre des enregistrements.

✨ Vérifier la solution et pratiquer

Résumé

Dans ce laboratoire, votre parcours avec Alex a abouti à la réussite de la mise en œuvre d'une fonctionnalité avancée dans le logiciel de suivi des finances personnelles : la fonctionnalité de glisser-déposer pour réordonner les enregistrements financiers. Cette amélioration non seulement améliore l'utilisabilité de l'application, mais vous initie également à la gestion complexe d'événements et aux mises à jour dynamiques de l'interface utilisateur dans le développement web. Au cours de ce processus, vous avez acquis des connaissances précieuses sur la création d'applications web interactives et intuitives qui répondent aux actions de l'utilisateur de manière sophistiquée.

L'exploration de techniques avancées de gestion d'événements telles que la glisser-déposer a élargi votre outilbox en tant que développeur web, vous permettant de résoudre des défis plus complexes en matière d'interface utilisateur/expérience utilisateur. Ces connaissances sont cruciales pour construire des applications web modernes qui répondent aux hautes attentes des utilisateurs d'aujourd'hui en matière d'interactivité et de réactivité.