HTML拖放依赖Drag and Drop API与JavaScript事件处理，无需复杂函数库。首先设置元素draggable="true"使其可拖动，然后监听dragstart、dragover和drop三个核心事件。在dragstart中通过e.dataTransfer.setData()存储数据并设置允许的效果；在dragover中必须调用e.preventDefault()以允许放置；在drop事件中阻止默认行为并获取数据完成操作。示例展示了将蓝色方块拖入目标区域并更新内容与样式的过程。进阶应用如列表项排序，通过记录dragstart时的被拖元素，在dragover中动态插入到新位置实现重排。关键技巧包括正确使用dataTransfer传递数据、始终阻止默认行为以触发drop事件，以及注意移动端兼容性问题，因原生拖放在移动设备支持有限，建议结合touch事件或使用SortableJS等库。掌握这些基础即可实现多数拖放需求。
HTML 拖放功能并不依赖“函数”来实现，而是通过浏览器原生支持的 Drag and Drop API 配合 JavaScript 来完成。你不需要写复杂的函数库，只需监听几个关键事件并处理数据传递即可。下面是一个实用、清晰的实战教程，带你一步步实现拖放功能。
1. 设置可拖动元素（draggable 属性）
要让一个元素可以被拖动，首先设置其 draggable="true" 属性：
<div id="drag1" draggable="true" style="width:100px; height:100px; background:#007acc; color:white; text-align:center; line-height:100px;">拖我</div>只有设置了 draggable 属性，浏览器才会触发拖放相关事件。
2. 监听拖放事件
拖放过程涉及多个事件，核心包括：
立即学习“前端免费学习笔记（深入）”；
- dragstart：开始拖动时触发
- dragover：拖动过程中经过目标区域时持续触发（需阻止默认行为才能允许放置）
- drop：在目标区域释放时触发
下面是一个完整的示例：将一个方块拖入另一个容器。
<!-- 可拖动元素 -->
<div id="dragElem" draggable="true" style="width:100px; height:100px; background:blue; color:white; text-align:center; line-height:100px; margin:10px;">拖我</div>
<!-- 放置目标 -->
<div id="dropZone" style="width:200px; height:200px; border:2px dashed #ccc; margin:20px; text-align:center; line-height:200px;">拖到这里</div>
<script>
const dragElem = document.getElementById('dragElem');
const dropZone = document.getElementById('dropZone');
// 拖动开始
dragElem.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', '我是被拖的数据'); // 存入数据
e.dataTransfer.effectAllowed = 'move'; // 允许效果为移动
});
// 允许拖动到目标上（必须阻止默认）
dropZone.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
// 释放时执行操作
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
console.log(data); // 输出：我是被拖的数据
dropZone.innerHTML = '<strong>已放入！</strong>';
dropZone.style.background = '#f0f8ff';
});
</script>
3. 实战进阶：拖动列表项排序
常见需求是实现列表项拖拽排序。思路是记录被拖动的元素，在 drop 时插入到新位置。
<ul id="sortableList" style="list-style:none; padding:0;">
<li draggable="true" style="padding:10px; background:#eee; margin:5px; cursor:move;">项目 1</li>
<li draggable="true" style="padding:10px; background:#eee; margin:5px; cursor:move;">项目 2</li>
<li draggable="true" style="padding:10px; background:#eee; margin:5px; cursor:move;">项目 3</li>
</ul>
<script>
const list = document.getElementById('sortableList');
let draggedItem = null;
list.addEventListener('dragstart', (e) => {
draggedItem = e.target;
e.dataTransfer.effectAllowed = 'move';
});
list.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须阻止，否则无法触发 drop
const current = e.target;
if (current.tagName === 'LI' && current !== draggedItem) {
// 插入到当前项之前
list.insertBefore(draggedItem, current);
}
});
list.addEventListener('drop', (e) => {
e.preventDefault();
});
</script>
这个例子实现了简单的拖拽排序，无需额外框架。
4. 注意事项与技巧
- 必须调用 e.preventDefault() 在 dragover 和 drop 中，否则 drop 不会触发
- dataTransfer 是传递数据的核心对象，支持文本、URL、文件等
- 移动端不完全支持原生拖放，建议配合 touch 事件或使用第三方库（如 SortableJS）
- 可拖动类型：text/plain、text/uri-list、Files 等
基本上就这些。掌握 dragstart、dragover、drop 三个事件，就能实现大多数拖放需求。不复杂但容易忽略细节，尤其是阻止默认行为这一步。
