JavaScript 是最受欢迎的编程语言之一，拥有 24 个以上的框架和大约 84 个库。它是唯一一种所有浏览器都原生支持的编程语言。此外，该语言支持动态类型，非常适合渲染和动画。您可以利用 JavaScript 在前端添加交互行为、控制后端、创建 Web 和移动应用程序等。为任何网站添加效果并使其可定制的选项，使该语言成为全球开发人员的最爱。
在本指南中，我们将 引导您完成使用纯原生 JavaScript（Vanilla JavaScript）创建拖放元素的步骤。此外，我们还将更进一步，使用 HTML 拖放 API 事件处理程序构建一个“早晨日程规划”（Morning Scheduler）应用程序。
前提条件
要学习本教程，您必须具备：
步骤 1：创建新项目
首先创建一个包含两个子元素的容器。我们将使用第一个子元素进行拖动，使用第二个子元素来存储拖动的元素。
|
注意： 在本教程中，我们将把容器视为保存所有拖动元素的存储库。简单来说，从第一个子元素拖动的所有元素都将被放置到第二个子元素中。 |
|
1 |
$ mkdir drag-and-drop-demo |
接下来，使用 cd 命令将目录更改为 drag-and-drop-demo 文件夹：
|
1 |
$ cd drag-and-drop-demo |
步骤 2：初始设置
在本教程中，我们将创建 HTML、CSS 和 JavaScript 文件并连接它们。首先，将这些文件分别命名为 index.html, styles.css、 scripts.js 文件。
接下来，在 “My Morning Planner” in the index.html 文件中添加标题：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Morning Planner</title> </head> <body> </body> </html> |
接下来，链接 CSS，并将 JavaScript 添加到 HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>My Morning Planner</title> </head> <body> </body> </html> |
接下来，在 <body> 标签中添加以下代码行：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>我的早晨计划表</title> </head> <body> <div class="container"> <h1><center>我的早晨计划表</center></h1> <h2 class="draggable" draggable="true">去健身房</h2> <h2 class="draggable" draggable="true">阅读30分钟</h2> <h2 class="draggable" draggable="true">准备燕麦片</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">洗个冷水澡</h2> <h2 class="draggable" draggable="true">开启新的一天</h2> </div> </body> </html> |
保存并关闭 index.html 文件。之后，尝试在浏览器中打开 index.html 文件，您将看到一个页面打开：
接下来，让我们使用 CSS 为我们的 index.html 设置样式，使其看起来更美观。
第 3 步：使用 CSS 设置样式
接下来，为我们在 index.html 文件中包含的所有元素添加样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
尝试在浏览器中打开 index.html 文件并查看输出：
虽然我们已经完成了结构构建并添加了样式，但这些元素仍然是静态的。这意味着，在为它们添加动态功能之前，我们无法移动或滚动这些元素。在下一步中，我们将引入 JavaScript 和动态行为。
第 4 步：引入 JavaScript
在这一步中，我们将引入 JavaScript 并使所有拖拽元素生效。在 JS 文件中，设置我们需要的元素。让我们定义 draggable 和 containers 来分别进行拖放元素。
在 scripts.js 文件中添加这两行代码：
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
接下来，设置所有的事件监听器。首先添加 “dragstart” 元素作为第一个事件监听器来 add 类列表。类似地，添加 “dragend” 元素作为第二个事件监听器来 remove 类列表。
在你的 EventListeners 中附加以下 scripts.js 文件中：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
接下来，添加 “dragover” EventListener 用于悬停和移动我们的元素。使用 draggable 元素，通过 querySelector 获取，然后将该拖拽元素追加到当前容器中：
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
默认情况下，禁用在元素内部放置。使用 e.preventDefault 来启用它：
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
接下来，创建一个元素来确定鼠标位置。首先创建一个函数 getDragAfterElement，它将接受两个参数。第一个是 container，第二个参数 y 将处理鼠标的 Y 轴位置。现在，使用 querySelectorAll 函数来获取我们的拖拽元素。定义一个 draggableElements 指向容器内的所有拖拽元素：
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
接下来，调用一个 reduce 函数，该函数将循环遍历拖拽元素列表，并确定鼠标光标后的单个元素。接下来， return 该 reduce 函数，通过将第一个元素添加为 closest，第二个元素添加为 child。此外，使 offset 相等并添加条件。
在以下文件中添加以下代码行： scripts.js 文件：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
将其包含在 scripts.js 文件中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
现在我们已经完成了必要的设置。打开浏览器并运行 index.html 。您将在浏览器中看到页面 “My Morning Scheduler” ，其中包含拖放选项。中间的白线起到了桥梁的作用，用于区分已完成的任务和待完成的任务：
结论
拖放是现代网站中一个非常棒的选择。在本指南中，我们使用了几个事件处理程序，以便初学者轻松学习。总共有八个事件处理程序，我们鼓励您在进阶时使用它们。一旦您熟练掌握了本教程中使用的函数和代码，就可以深入研究 JavaScript 主题，例如 jQuery 并开始探索。您还可以尝试使用 JavaScript 日期和时间功能 构建待办事项应用、每周进度跟踪器以及其他应用，这些都基于您刚刚学到的概念。
要进一步了解有关 JavaScript 和 Web 开发主题的更多信息，请查看来自 我们博客的资源:
- JavaScript 工具：localStorage 和 sessionStorage
- 使用 JavaScript：什么是对象
- 在 JavaScript 中处理 JSON 的教程
- 使用 JavaScript：类是如何运作的
祝您计算愉快！
评论
暂无评论。发表第一条评论吧。