介绍
在这个实验中，Alex 在开发个人财务追踪器的过程中进入了一个高级阶段，重点是通过复杂的事件处理技术来增强应用程序的交互性。场景设定在一家科技初创公司的头脑风暴会议上，Alex 提议添加一个拖放功能来重新排序财务记录。这个雄心勃勃的目标旨在为用户提供一种直观的方式来组织他们的记录，反映出个人财务管理的流动性。实现这一目标需要 Alex 探索高级的 DOM 事件，并以视觉上吸引人且用户友好的方式操作元素。
在这个实验中，你将深入学习 JavaScript 中的高级事件处理，学习如何实现拖放功能以动态重新排序列表中的项目。这项技能对于创建优先考虑用户体验的现代交互式 Web 应用程序非常宝贵。
知识点:
- 拖放 API (
dragstart,dragover,drop)
DragEvent
DragEvent 是一个用于处理拖放操作的事件接口。它继承自 MouseEvent，因此包含所有鼠标事件的属性，以及一些特定于拖放操作的额外属性。
设置拖放功能
要使一个元素可拖动，你需要将其 draggable 属性设置为 true。然后，你可以添加事件监听器来处理拖放事件。
<div id="drag-item" draggable="true">Drag me</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>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) {
// 设置拖拽数据
event.dataTransfer.setData(
"text/plain",
"This is the data being dragged"
);
});
dragItem.addEventListener("dragend", function (event) {
// 拖拽结束后的操作
console.log("Drag ended");
});
</script>
</body>
</html>
处理放置
为了使一个元素能够接收被放置的项目，你需要处理 dragover 和 drop 事件。
例如：
<!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 代码
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");
// 拖拽开始事件
dragItem.addEventListener("dragstart", function (event) {
event.dataTransfer.setData("text/plain", "Drag Successful");
});
// 拖拽悬停事件
dropZone.addEventListener("dragover", function (event) {
event.preventDefault(); // 必须调用以允许放置
});
// 放置事件
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>
实现拖放重新排序
在这一步中，你和 Alex 将通过添加拖放功能来增强个人财务追踪器，使用户能够重新排序他们的财务记录。这涉及捕获多个事件：dragstart、dragover、drop，并确保 DOM 相应地更新。
首先，修改 script.js 中的 renderRecords 函数，使每条记录可拖动并处理这些事件：
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);
});
};
});
此实现使用户能够拖动财务记录并将其放置在列表中的新位置，应用程序会自动更新记录的顺序。
总结
在这个实验中，你和 Alex 的旅程成功地实现了个人财务追踪器中的一个高级功能：通过拖放功能重新排序财务记录。这一改进不仅提升了应用程序的可用性，还让你深入了解了 Web 开发中的复杂事件处理和动态 UI 更新。通过这一过程，你获得了宝贵的经验，学会了如何创建交互式且直观的 Web 应用程序，以复杂的方式响应用户操作。
探索拖放等高级事件处理技术扩展了你作为 Web 开发者的工具箱，使你能够应对更复杂的 UI/UX 挑战。这些知识对于构建满足当今用户对交互性和响应性高期望的现代 Web 应用程序至关重要。
