零门槛搞定！原生 JS 中拖拽的艺术

前端

2023-11-18 03:32:02

原生 JS 中拖拽的艺术：彻底揭秘

拖拽，在前端开发界早已是鼎鼎大名的需求，也是面试中的热门话题。然而，隐藏在便利的第三方库背后，拖拽的原理却鲜为人知。今天，让我们一起掀开这层神秘面纱，深入探究原生 JavaScript 中拖拽的艺术。

事件：交互的桥梁

在拖拽的世界中，事件是举足轻重的主角。它们将用户的鼠标动作（点击、移动、释放）转化为 JavaScript 听得懂的信号。三个关键事件如下：

mousedown： 当鼠标按下时触发
mousemove： 当鼠标移动时触发
mouseup： 当鼠标松开时触发

这三位事件就像三剑客，为拖拽操作奠定了基础。

DataTransfer：数据的搬运工

在拖拽过程中，我们需要在元素间传递数据。这时，DataTransfer 对象闪亮登场。它就像一个搬运工，负责存储和传输拖拽数据。我们可以通过 dataTransfer.setData() 设置数据，通过 dataTransfer.getData() 获取数据。

拖拽流程：一气呵成

有了事件和 DataTransfer，我们就可以构建一个完整的拖拽流程：

在可拖拽元素上添加 mousedown 事件监听器
在 mousedown 事件处理程序中，设置拖拽数据并开始拖拽操作
在可放置元素上添加 dragover 和 drop 事件监听器
在 dragover 事件处理程序中，防止浏览器默认行为（如复制、打开链接）
在 drop 事件处理程序中，获取拖拽数据并执行相应操作

一个简易的拖拽功能就此诞生！

代码示例：玩转拖拽

为了加深理解，我们准备了一个简单的案例演示：一个待办事项列表，你可以通过拖拽重新排序任务。

// 获取元素
const tasks = document.querySelectorAll(".task");

// 添加拖拽事件监听器
tasks.forEach(task => {
  task.addEventListener("mousedown", startDrag);
});

// 开始拖拽
function startDrag(e) {
  e.target.classList.add("dragging");
  e.dataTransfer.setData("text", e.target.id);
}

// 防止默认行为
document.addEventListener("dragover", e => {
  e.preventDefault();
});

// 放置元素
document.addEventListener("drop", e => {
  e.preventDefault();
  const data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
});

// 结束拖拽
document.addEventListener("mouseup", e => {
  tasks.forEach(task => {
    task.classList.remove("dragging");
  });
});

拖拽的魅力

拖拽功能在网页设计中有着广泛的应用，它为用户提供直观、友好的交互体验。掌握原生 JavaScript 中的拖拽技术，你就能为自己的项目注入拖拽的魅力。

常见问题解答

拖拽时如何防止浏览器默认行为？
- 在 dragover 事件处理程序中使用 e.preventDefault()。
如何获取拖拽的数据？
- 在 drop 事件处理程序中使用 e.dataTransfer.getData("text")。
如何设置拖拽的数据？
- 在 mousedown 事件处理程序中使用 e.dataTransfer.setData("text", e.target.id)。
如何限制只能拖拽特定元素？
- 只在要拖拽的元素上添加 draggable 属性。
如何禁用拖拽？
- 将 draggable 属性设置为 false。