Mejora del seguidor de finanzas personales con arrastrar y soltar

Introducción

En este Laboratorio, la jornada de Alex en el desarrollo del seguidor de finanzas personales entra en una etapa avanzada, centrándose en mejorar la interactividad de la aplicación a través de técnicas sofisticadas de manejo de eventos. La escena se desarrolla en una sesión de sesiones de idea generación en la startup tecnológica, donde Alex propone agregar una característica de arrastrar y soltar para reordenar los registros financieros. Esta ambiciosa meta tiene como objetivo brindar a los usuarios una forma intuitiva de organizar sus registros, reflejando la naturaleza fluida de la gestión de finanzas personales. Lograr esto requiere que Alex explore los eventos DOM avanzados y manipule los elementos de una manera que sea atractiva visualmente y amigable para el usuario.

En este Laboratorio, profundizará en el manejo avanzado de eventos en JavaScript, aprendiendo cómo implementar la funcionalidad de arrastrar y soltar para reordenar dinámicamente los elementos en una lista. Esta habilidad es invaluable para crear aplicaciones web modernas e interactivas que prioricen la experiencia del usuario.

Puntos de conocimiento:

API de arrastrar y soltar (dragstart, dragover, drop)

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 95%. Ha recibido una tasa de reseñas positivas del 97% por parte de los estudiantes.

DragEvent

DragEvent es una interfaz de eventos para manejar operaciones de arrastrar y soltar. Extiende de MouseEvent, por lo que incluye todas las propiedades de eventos de ratón más algunas propiedades adicionales específicas de las operaciones de arrastrar y soltar.

Configuración de arrastrar y soltar

Para hacer que un elemento sea arrastrable, debes establecer su atributo draggable en true. Luego, puedes agregar oyentes de eventos para manejar los eventos de arrastrar y soltar.

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

setAttribute("draggable", true);

Manejo de eventos de arrastrar y soltar

Las operaciones de arrastrar y soltar implican varios eventos, incluyendo dragstart, drag, dragend, dragenter, dragover, dragleave y drop.

dragstart: Se activa cuando el usuario comienza a arrastrar un elemento.
drag: Se activa continuamente mientras se está arrastrando un elemento.
dragend: Se activa cuando finaliza la operación de arrastrar y soltar.

Por ejemplo, agregar oyentes de eventos a un elemento:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de arrastrar y soltar</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">Arrastrame</div>
    <div id="drop-zone">Suelta aquí</div>

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

      dragItem.addEventListener("dragstart", function (event) {
        // Establece los datos de arrastre
        event.dataTransfer.setData(
          "text/plain",
          "Estos son los datos que se están arrastrando"
        );
      });

      dragItem.addEventListener("dragend", function (event) {
        // Operaciones después de que finalice el arrastre
        console.log("El arrastre ha terminado");
      });
    </script>
  </body>
</html>

Manejo de la operación de soltar

Para permitir que un elemento reciba elementos soltados, debes manejar los eventos dragover y drop.

Por ejemplo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de arrastrar y soltar</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">Arrastrame</div>
    <div id="drop-zone">Suelta aquí</div>

    <script>
      // Código JavaScript aquí
      const dragItem = document.getElementById("drag-item");
      const dropZone = document.getElementById("drop-zone");

      // Evento de inicio de arrastre
      dragItem.addEventListener("dragstart", function (event) {
        event.dataTransfer.setData("text/plain", "Arrastre exitoso");
      });

      // Evento de arrastre sobre el área de destino
      dropZone.addEventListener("dragover", function (event) {
        event.preventDefault(); // Es necesario permitir la operación de soltar
      });

      // Evento de soltar
      dropZone.addEventListener("drop", function (event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text/plain");
        console.log("Datos soltados:", data);
        dropZone.textContent = `Soltado: ${data}`;
      });
    </script>
  </body>
</html>

✨ Revisar Solución y Practicar

Implementación de arrastrar y soltar para reordenar

En este paso, tú y Alex mejorarán el seguidor de finanzas personales agregando la capacidad para que los usuarios reordenen sus registros financieros mediante arrastrar y soltar. Esto implica capturar varios eventos: dragstart, dragover, drop, y asegurarse de que el DOM se actualice en consecuencia.

Primero, modifica la función renderRecords en script.js para hacer que cada registro sea arrastrable y para manejar estos eventos:

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

Esta implementación permite a los usuarios arrastrar un registro financiero y soltarlo en una nueva posición dentro de la lista, con la aplicación actualizando automáticamente el orden de los registros.

✨ Revisar Solución y Practicar

Resumen

En este laboratorio, tu viaje con Alex ha llevado a la implementación exitosa de una característica avanzada en el seguidor de finanzas personales: la funcionalidad de arrastrar y soltar para reordenar registros financieros. Esta mejora no solo mejora la usabilidad de la aplicación, sino que también te introduce al manejo complejo de eventos y actualizaciones dinámicas de la interfaz de usuario en el desarrollo web. A través de este proceso, has adquirido valiosos conocimientos sobre la creación de aplicaciones web interactivas e intuitivas que responden a las acciones del usuario de manera sofisticada.

Explorar técnicas avanzadas de manejo de eventos como el arrastrar y soltar ha ampliado tu conjunto de herramientas como desarrollador web, lo que te permite enfrentar retos más complejos de interfaz de usuario/experiencia del usuario. Este conocimiento es crucial para construir aplicaciones web modernas que cumplan con las altas expectativas de los usuarios actuales en cuanto a interactividad y respuesta.