要实现拖放功能需设置draggable=”true”，并通过dragstart、dragover、drop等事件配合dataTransfer传递数据，其中dragover必须调用preventDefault才能触发drop。

拖放功能在现代网页中很常见，比如文件上传、任务排序、拼图游戏等场景。javaScript 提供了原生的拖放 API（Drag and Drop API），无需依赖第三方库就能实现基本的拖放交互。下面介绍如何使用该 API 实现元素的拖放。

启用拖拽：设置 draggable 属性

要让一个元素可拖动，必须设置其 draggable=”true” 属性。这是触发拖放操作的前提。

例如：

<div id=”dragElem” draggable=”true” style=”background: lightblue; padding: 20px;”>拖动我</div>

只有设置了 draggable=”true” 的元素才能触发拖放事件。

立即学习“Java免费学习笔记（深入）”；

关键拖放事件详解

拖放过程涉及多个事件，主要分为两类：被拖动元素的事件和目标区域的事件。

常用事件包括：

讯飞开放平台

科大讯飞推出的以语音交互技术为核心的ai开放平台

64

查看详情

• dragstart：拖动开始时触发，通常在这里设置拖动数据
• drag：拖动过程中持续触发
• dragend：拖动结束（无论是否释放成功）
• dragenter：被拖元素进入目标区域
• dragover：被拖元素在目标区域上移动，需阻止默认行为才能触发 drop
• drop：在目标区域释放元素时触发，处理放置逻辑
• dragleave：被拖元素离开目标区域

实现拖放的基本步骤

以下是一个简单的文本拖放示例，将一个 div 拖到另一个容器中。

html 结构：

<div id=”source” draggable=”true” style=”background: yellow; padding: 20px;”>
  拖动我到下方盒子
</div>

<div id=”target” style=”width: 200px; height: 100px; background: #eee; border: 2px dashed #999; margin-top: 20px; text-align: center; line-height: 100px;”>
  放下到这里
</div>

javascript 代码：

const source = document.getElementById(‘source’);
const target = document.getElementById(‘target’);

target.addEventListener(‘drop’, (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData(‘text/plain’);
  target.innerText = data;
});

说明：

• e.dataTransfer 用于在拖放过程中传递数据
• dragover 事件中调用 preventDefault() 是必须的，否则无法触发 drop
• 可以在 setData() 中使用不同类型的数据类型（如 ‘text/html‘、自定义类型等）

高级技巧与注意事项

实际开发中可能需要更精细的控制：

• 通过 effectAllowed 和 dropEffect 控制拖放效果（如复制、移动、链接）
• 使用 css 类在 dragenter 和 dragleave 时高亮目标区域
• 支持拖放文件（如从桌面拖入上传区），可通过 e.dataTransfer.files 获取文件列表
• 移动端不原生支持拖放 API，需结合 touch 事件模拟

基本上就这些。原生拖放 API 虽然简单，但在大多数基础场景中足够使用，理解核心事件流是关键。不复杂但容易忽略的是 dragover 中阻止默认行为这个细节。