17370845950

首先设置draggable="true"并监听dragstart、dragover、drop等事件，在dragover中调用preventDefault以允许放置，通过dataTransfer传递数据，实现任务项拖拽移动，并可添加样式反馈与AJAX持久化。

HTML5 的拖放（Drag and Drop）API 让用户可以通过鼠标直接拖动元素从一个位置移动到另一个位置，无需复杂的 JavaScript 插件。它原生支持，使用简单，非常适合实现文件上传、列表排序、拼图游戏等交互功能。下面通过一个实战案例，带你掌握如何使用 HTML5 拖放 API。

拖放基础：理解 drag 和 drop 事件

要启用拖放功能，需设置元素的 draggable="true"，并监听一系列拖放相关的事件：

• dragstart：拖动开始时触发，通常在此设置拖动的数据
• dragover：被拖动元素在目标区域上移动时持续触发，必须阻止默认行为才能允许放置
• drop：在目标区域释放拖动元素时触发，处理放置逻辑
• dragend：拖动结束（无论是否成功）后触发

注意：dragover 事件中必须调用 event.preventDefault()，否则 drop 事件不会触发。

实战案例：实现可拖动任务项的任务看板

我们来做一个简单的“任务看板”，包含“待办”和“已完成”两个列表，用户可以将任务从“待办”拖到“已完成”区域。

  
    
待办任务
    写页面结构
    添加拖放逻辑
  

  
    
已完成
  

对应的 JavaScript 代码：

function allowDrop(event) {
  event.preventDefault(); // 允许放置
}

function dragStart(event) {
  event.dataTransfer.setData("text/plain", event.target.dataset.id);
  event.target.classList.add("dragging");
}

function drop(event) {
  event.preventDefault();
  const taskId = event.dataTransfer.getData("text/plain");
  const taskElement = document.querySelector(`[data-id="${taskId}"]`);

  // 将任务添加到目标列
  event.target.appendChild(taskElement);
  taskElement.classList.remove("dragging");
}

这里我们通过 dataTransfer.setData() 存储任务 ID，在 drop 时根据 ID 找到对应元素并移动。注意，append 操作会自动从原父元素移除节点。

增强体验：视觉反馈与数据持久化建议

为了让拖放更直观，可以在拖动过程中添加样式反馈：

.dragging {
  opacity: 0.6;
  transform: scale(1.05);
}

你还可以在 drop 后发送 AJAX 请求，将任务状态更新到服务器，实现数据持久化。例如：

fetch('/api/update-task', {
  method: 'POST',
  body: JSON.stringify({ id: taskId, status: 'done' })
});

对于更复杂的应用，如文件上传，可以监听 dragover 和 drop 事件中的 event.dataTransfer.files 来获取拖入的本地文件。