拖放API是浏览器原生事件机制，需通过draggable="true"启用拖拽、dragover中preventDefault允许放置、dragstart设置dataTransfer数据、drop中获取并执行操作。
拖放 API 是浏览器原生提供的一套事件机制，用于支持用户通过鼠标（或触摸）拖拽元素并放置到目标区域的交互行为。它不是某个单独的函数，而是一组配套的事件和方法，核心在于 dragstart、dragover、drop 这三个关键环节的配合。
拖放的基本流程和必要步骤
要让一个元素可拖，另一个元素能接收，必须满足几个硬性条件：
- 被拖拽的元素需设置
draggable="true"属性（默认false，除外） - 目标区域必须阻止
dragover的默认行为，否则drop事件不会触发 - 在
dragstart中用dataTransfer.setData()存储数据（如文本、ID、JSON 字符串） - 在
drop中用dataTransfer.getData()取出数据，并执行实际操作（比如移动 DOM、更新状态）
常见写法：一个可拖列表项到容器的示例
假设你有一个任务列表，想把任务拖进「已完成」区域：
写周报回邮件拖到这里完成
对应 JS：
立即学习“Java免费学习笔记（深入）”；
Android配合WebService访问远程数据库 中文WORD版
下载
采用HttpClient向服务器端action请求数据，当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据，那么什么是webService呢？，它是一种基于SAOP协议的远程调用标准，通过webservice可以将不同操作系统平台，不同语言，不同技术整合到一起。 实现Android与服务器端数据交互，我们在PC机器java客户端中，需要一些库，比如XFire,Axis2,CXF等等来支持访问WebService，但是这些库并不适合我们资源有限的android手机客户端，
// 让每个 task 可拖
document.querySelectorAll('.task').forEach(task => {
task.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', task.dataset.id);
});
});
// 设置 drop 区域
const doneArea = document.getElementById('done-area');
doneArea.addEventListener('dragover', e => {
e.preventDefault(); // 必须！否则 drop 不触发
});
doneArea.addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const task = document.querySelector(`[data-id="${id}"]`);
if (task) doneArea.appendChild(task); // 移动 DOM
});
注意细节：避免踩坑
很多初学者卡在“drop 不生效”，往往是因为：
- 忘了在
dragover里调e.preventDefault() - 误以为
drop会自动移动元素——其实只是通知，DOM 操作得自己写 - 用错
dataTransfer.setData()的类型，比如传对象却不序列化：setData('application/json', JSON.stringify(obj)) - 拖拽跨 iframe 或跨页面时，部分数据类型受限（仅支持字符串），且需同源
增强体验的小技巧
提升真实感，可以加点视觉反馈：
- 在
dragstart给被拖元素加临时 class（比如半透明 + 阴影） - 在
dragenter和dragleave切换目标区域样式（如高亮边框） - 用
e.dataTransfer.effectAllowed和e.dataTransfer.dropEffect控制光标样式（move/copy/link）
基本上就这些。不复杂但容易忽略细节，理清 drag → dragover → drop 这条链，再补上 preventDefault 和 setData/getData，就能稳稳跑起来。
