HTML5 拖放(Drag and Drop)知识大全
编程小白也能理解的HTML5拖放功能详解
📌 基础概念
什么是拖放？
拖放(Drag and Drop)就是用户可以用鼠标抓住一个元素，然后把它移动到另一个位置的操作。就像在电脑桌面上拖动图标那样。
为什么要用拖放？
拖放让用户操作更直观自然，特别适合需要重新排序、分组或组织内容的场景，如图片管理、任务列表、文件上传等。
核心组成要素
拖放操作中有两个重要角色：
- 拖动源(Drag Source)：被拖动的元素
- 放置目标(Drop Target)：被拖到的目的地
🔧 基本实现步骤
1. 设置元素可拖动
给需要拖动的元素添加 draggable="true" 属性：
<div id=”dragItem” draggable=”true”>
拖我！
</div>
拖我！
</div>
2. 处理拖动开始事件
当用户开始拖动元素时触发 dragstart 事件：
element.addEventListener(‘dragstart’, (event) => {
// 设置要传输的数据
event.dataTransfer.setData(‘text/plain’, event.target.id);
});
// 设置要传输的数据
event.dataTransfer.setData(‘text/plain’, event.target.id);
});
3. 处理放置目标事件
当拖动到一个元素上时，需要处理多个事件：
dragover– 当元素在目标上方移动时dragenter– 当元素进入目标时dragleave– 当元素离开目标时drop– 当元素被放置在目标上时
🧠 核心知识点
数据传输对象 DataTransfer
拖放过程中用来存储和获取数据的核心对象，所有拖放事件中都有这个对象：
// 设置数据
event.dataTransfer.setData(format, data);
// 获取数据
const data = event.dataTransfer.getData(format);
event.dataTransfer.setData(format, data);
// 获取数据
const data = event.dataTransfer.getData(format);
常用格式：’text/plain’, ‘text/html’
阻止默认行为
浏览器默认不允许放置操作，所以在放置目标上必须阻止默认行为：
dropTarget.addEventListener(‘dragover’, (e) => {
e.preventDefault(); // 允许放置
});
e.preventDefault(); // 允许放置
});
拖放事件生命周期
整个拖放过程的完整事件流：
- dragstart – 开始拖动
- drag – 拖动中（持续触发）
- dragenter – 进入放置目标
- dragover – 在放置目标上移动
- dragleave – 离开放置目标
- drop – 在目标上释放
- dragend – 拖动操作结束
🚀 拖放功能演示
试试把左边的元素拖放到右边的区域（可拖回）：
1
2
3
放置区