启用元素拖动需设置draggable="true"，通过dragstart、dragover、drop事件实现拖放逻辑，利用dataTransfer传递数据并调用preventDefault()防止默认行为。
HTML5 的拖放（Drag and Drop）API 让用户可以通过鼠标拖动元素从一个位置移动到另一个位置，广泛用于文件上传、列表排序、拼图游戏等场景。实现这一功能不需要额外的库，原生 JavaScript 就能完成。
启用元素可拖动
要让一个元素可以被拖动，需设置其 draggable="true" 属性，尤其是图片、链接默认可拖动，其他元素如 div、span 需手动开启。
示例：拖动我
监听拖放事件
拖放过程涉及多个事件，关键包括：
立即学习“前端免费学习笔记（深入）”；
- dragstart：拖动开始时触发，用于设置拖动数据
- dragover：被拖动元素在目标区域上移动时持续触发，必须阻止默认行为才能允许放置
- drop：在目标区域释放时触发，处理放置逻辑
- dragend：拖动结束（无论是否成功）
基本事件绑定示例：
const dragEl = document.getElementById('dragElement');
const dropZone = document.getElementById('dropZone');
dragEl.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', '这是拖动的数据');
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须阻止默认行为
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
dropZone.textContent = data;
});
实现拖放文本或自定义数据
dataTransfer 对象是拖放的核心，用于在拖动过程中传递数据。
-
setData(format, data)：设置拖动数据，常用格式为
text/plain - getData(format)：在 drop 时获取数据
- effectAllowed 和 dropEffect 可控制光标样式和操作类型（如 move、copy）
例如，拖动时显示复制图标：
dragEl.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', dragEl.id);
e.dataTransfer.effectAllowed = 'copy';
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; // 显示复制光标
});
拖放文件（如上传）
拖放 API 还支持文件操作。将文件从桌面拖入浏览器时，在 drop 事件中可通过 e.dataTransfer.files 获取 FileList。
dropZone.addEventListener('dragover', (e) => e.preventDefault());
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
if (files.length > 0) {
const file = files[0];
console.log('文件名:', file.name);
// 可结合 FileReader 读取内容或用 FormData 上传
}
});
基本上就这些。掌握 dragstart、dragover、drop 三个关键事件，再合理使用 dataTransfer，就能实现大多数拖放需求。注意始终调用 preventDefault() 避免浏览器默认行为中断操作。
