html5的拖放功能让网页元素可以被用户直接拖动并投放到指定区域，广泛应用于文件上传、列表排序等场景。实现这一功能并不复杂，关键在于理解拖放事件的流程和正确设置元素属性。
启用元素拖拽
要使一个元素可拖动，需将其 draggable 属性设为 true。仅设置该属性还不够，还需监听拖拽过程中的事件。
常见可拖动元素包括文本、图片、自定义dom节点等。例如：
<div draggable="true" id="dragElement">拖我试试</div>
图片元素默认可拖动，其他元素需要手动开启 draggable 属性。
立即学习“前端免费学习笔记（深入）”；
拖放事件详解
拖放操作涉及多个事件，按顺序触发：
- dragstart：拖动开始时触发，通常在此设置拖动数据
- drag：拖动过程中持续触发
- dragend：拖动结束（释放或取消）时触发
- dragenter：被拖元素进入目标区域时触发
- dragover：在目标区域上方持续移动时触发，必须阻止默认行为才能触发 drop
- dragleave：离开目标区域时触发
- drop：在目标区域释放时触发，处理投放逻辑
其中 dragover 事件必须调用 Event.preventDefault()，否则无法触发 drop 事件。
数据传递与 setData/getData
拖放过程中可通过 dataTransfer 对象传递数据。
在 dragstart 中使用 setData(format, data) 存储数据：
event.dataTransfer.setData("text/plain", "这是拖动的数据");
在 drop 事件中通过 getData(format) 获取：
const data = event.dataTransfer.getData("text/plain");
format 常用类型有 “text/plain”、”text/uri-list”（链接）、”text/html” 等。
实战示例：拖放移动元素
以下是一个简单示例，将一个方块从一处拖到另一处：
<pre class="brush:php;toolbar:false;"> <div id="source" ondragstart="dragStart(event)"> <div id="box" draggable="true">拖动我</div> </div> <div id="target" ondragover="allowDrop(event)" ondrop="drop(event)">投放区</div> <script> function allowDrop(e) { e.preventDefault(); // 允许投放 } function dragStart(e) { e.dataTransfer.setData("text", e.target.id); } function drop(e) { e.preventDefault(); const id = e.dataTransfer.getData("text"); const elem = document.getElementById(id); e.target.appendChild(elem); // 移动元素 } </script>
注意：append 或 innerHTML 操作会影响原位置的元素结构，适合“移动”而非“复制”。
文件拖放上传
拖放功能常用于文件上传。当用户拖入本地文件时，可通过 dataTransfer.files 获取 FileList。
示例：
<pre class="brush:php;toolbar:false;"> document.getElementById("dropZone").addEventListener("drop", function(e) { e.preventDefault(); const files = e.dataTransfer.files; if (files.length > 0) { const file = files[0]; console.log("文件名:", file.name); console.log("大小:", file.size); // 可结合 FileReader 或 FormData 进行上传 } });
记得在 dragover 中阻止默认行为，否则无法触发 drop。
基本上就这些。掌握 dragstart、dragover 和 drop 三个核心事件，配合 dataTransfer 的数据传递，就能实现大多数拖放需求。不复杂但容易忽略细节，尤其是阻止默认行为这一步。