Улучшение персонального финансового трекера с использованием перетаскивания

Введение

В этом Лаборатории путь Алексея в разработке персонального финансового трекера входит в более продвинутую стадию, с акцентом на повышение интерактивности приложения с использованием сложных техник обработки событий. Сценарий разворачивается на头脑-сторонг-сессии в технологическом стартапе, где Алекс предлагает добавить функцию перетаскивания для переупорядочивания финансовых записей. Эта амбициозная цель направлена на то, чтобы предоставить пользователям интуитивный способ организации своих записей, отражая динамичность управления личными финансами. Для достижения этого Алекс должен изучить продвинутые DOM-события и манипулировать элементами таким образом, чтобы они были как визуально привлекательными, так и удобными для пользователя.

В этой Лаборатории вы углубитесь в продвинутую обработку событий в JavaScript, узнаете, как реализовать функцию перетаскивания для динамического переупорядочивания элементов в списке. Это умение имеет огромное значение для создания современных интерактивных веб-приложений, которые придают приоритет пользовательскому опыту.

Точки знания:

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{{"Улучшение персонального финансового трекера"}} javascript/dom_manip -.-> lab-290731{{"Улучшение персонального финансового трекера"}} javascript/event_handle -.-> lab-290731{{"Улучшение персонального финансового трекера"}} end

DragEvent

DragEvent - это интерфейс событий для обработки операций перетаскивания. Он наследуется от MouseEvent, поэтому включает все свойства событий мыши плюс некоторые дополнительные свойства, специфичные для операций перетаскивания.

Настройка перетаскивания

Чтобы сделать элемент перетаскиваемым, необходимо установить атрибут draggable равным true. Затем можно добавить слушатели событий для обработки событий перетаскивания.

<div id="drag-item" draggable="true">Перетащите меня</div>

или

setAttribute("draggable", true);

Обработка событий перетаскивания

Операции перетаскивания включают несколько событий, в том числе dragstart, drag, dragend, dragenter, dragover, dragleave и drop.

dragstart: Триггерится, когда пользователь начинает перетаскивать элемент.
drag: Триггерится непрерывно, пока элемент перетаскивается.
dragend: Триггерится, когда операция перетаскивания завершается.

Например, добавление слушателей событий к элементу:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Пример перетаскивания</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">Перетащите меня</div>
    <div id="drop-zone">Опустите здесь</div>

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

      dragItem.addEventListener("dragstart", function (event) {
        // Установка данных для перетаскивания
        event.dataTransfer.setData(
          "text/plain",
          "Это данные, которые перетаскиваются"
        );
      });

      dragItem.addEventListener("dragend", function (event) {
        // Операции после окончания перетаскивания
        console.log("Перетаскивание окончено");
      });
    </script>
  </body>
</html>

Обработка операции "Опустить"

Чтобы позволить элементу получать опущенные элементы, необходимо обработать события dragover и drop.

Например:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Пример перетаскивания</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">Перетащите меня</div>
    <div id="drop-zone">Опустите здесь</div>

    <script>
      // JavaScript код здесь
      const dragItem = document.getElementById("drag-item");
      const dropZone = document.getElementById("drop-zone");

      // Событие начала перетаскивания
      dragItem.addEventListener("dragstart", function (event) {
        event.dataTransfer.setData("text/plain", "Перетаскивание успешно");
      });

      // Событие перетаскивания над областью
      dropZone.addEventListener("dragover", function (event) {
        event.preventDefault(); // Необходимо для разрешения опускания
      });

      // Событие опускания
      dropZone.addEventListener("drop", function (event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text/plain");
        console.log("Опущенные данные:", data);
        dropZone.textContent = `Опущено: ${data}`;
      });
    </script>
  </body>
</html>

Реализация перетаскивания для переупорядочивания

В этом шаге вы и Алекс улучшите персональный финансовый трекер, добавив возможность для пользователей переупорядочивать свои финансовые записи с использованием перетаскивания. Для этого необходимо обработать несколько событий: dragstart, dragover, drop и обеспечить соответствующее обновление DOM.

Во - первых, модифицируйте функцию renderFinancialRecords в script.js, чтобы сделать каждую запись перетаскиваемой и обработать эти события:

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

Такая реализация позволяет пользователям перетаскивать финансовую запись и опускать ее в новую позицию в списке, при этом приложение автоматически обновляет порядок записей.

✨ Проверить решение и практиковаться

Резюме

В этой лаборатории ваш путь вместе с Алексом привёл к успешной реализации продвинутой функции в персональном финансовом трекере: функции перетаскивания для переупорядочивания финансовых записей. Это улучшение не только повышает удобство использования приложения, но и знакомит вас с сложной обработкой событий и динамическими обновлениями интерфейса в веб-разработке. В ходе этого процесса вы приобрели ценные знания о создании интерактивных и интуитивных веб-приложений, которые реагируют на действия пользователя сложными способами.

Изучение продвинутых техник обработки событий, таких как перетаскивание, расширило ваш набор инструментов как веб-разработчика, позволяя вам решать более сложные задачи по UI/UX. Эти знания важны для создания современных веб-приложений, которые отвечают высоким ожиданиям современных пользователей по интерактивности и отзывчивости.