答案：HTML5原生拖放API通过draggable属性和dragstart、dragover、drop等事件实现元素拖拽。设置draggable="true"使元素可拖动，dragstart中用dataTransfer存放数据，dragover中阻止默认行为以允许投放，drop时获取数据并处理，实现页面内拖拽交互。
HTML5 提供了原生的拖放（Drag and Drop）API，无需依赖第三方库即可实现元素的拖拽操作。通过监听一系列拖放事件并正确设置元素属性，可以轻松实现拖动、投放等交互效果。
启用元素可拖动
要使一个元素可拖动，需设置其 draggable="true" 属性。文本、图片等默认可拖动，其他元素如 div、span 需手动开启。
例如：<div draggable="true" id="drag-element">拖我</div>
关键拖放事件说明
拖放过程涉及多个事件，核心如下：
立即学习“前端免费学习笔记（深入）”；
- dragstart：在拖动开始时触发，用于设置拖动数据
- dragover：在被拖动元素经过可投放区域时持续触发，必须阻止默认行为才能允许投放
- drop：在目标区域释放拖动元素时触发，处理投放逻辑
- dragend：拖动结束时触发（无论是否成功投放）
实现步骤与代码示例
以下是一个简单的文字拖放示例：
1. 设置可拖动元素：
<div id="source" draggable="true">拖动我到下面区域</div>
2. 设置投放目标：
<div id="target">投放区</div>
3. JavaScript 逻辑：
const source = document.getElementById('source');
const target = document.getElementById('target');
source.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', source.textContent);
});
target.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须阻止默认行为
});
target.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
target.textContent = data;
});
注意事项
使用 HTML5 拖放 API 时需注意：
- 必须调用 preventDefault() 在 dragover 和 drop 事件中，否则 drop 不会生效
- dataTransfer 对象用于传递拖动数据，支持多种格式（如 text/plain、text/uri-list）
- 不支持直接拖动普通 div 到浏览器外，仅限页面内交互
- 移动端支持有限，建议结合 touch 事件做兼容处理
基本上就这些。掌握 dragstart、dragover 和 drop 三个核心事件，就能实现大多数基础拖放需求。虽然 API 看似繁琐，但逻辑清晰，适合轻量级拖拽场景。
