必须设置draggable="true"才能触发拖拽事件，否则即使绑定ondragstart也无效；dragstart中需调用dataTransfer.setData()传递数据，dragover中必须preventDefault()以启用drop事件。
拖放功能必须开启 draggable 属性
默认所有 HTML 元素（包括 div）都无法被拖拽，即使绑了 ondragstart 也没用。必须显式设置 draggable="true"，否则事件根本不会触发。
常见错误是只写 <div ondragstart="handleDrag(event)"> 就以为能拖，结果鼠标划过毫无反应——检查元素是否真有 draggable 属性才是第一要务。
-
draggable是布尔属性，写成draggable或draggable="true"都行，但draggable="false"会禁用（哪怕父级设为 true） - 原生可拖元素（如
<img>、<a>带href）默认draggable="true"，但div、span等一律默认false - 用 JS 动态设置时：
element.draggable = true，注意不是setAttribute('draggable', 'true')（虽然也生效，但推荐前者）
ondragstart 中必须调用 event.dataTransfer.setData()
ondragstart 的核心作用不是“开始拖”，而是“告诉浏览器这次拖的是什么”。如果没调用 event.dataTransfer.setData()，后续的 ondrop 里 dataTransfer.getData() 一定为空，拖到目标区啥也拿不到。
不设类型或类型不匹配是拖放取不到数据的最常见原因。比如设了 'text/plain'，但 ondrop 里却用 getData('text/html')，结果就是 null。
立即学习“前端免费学习笔记（深入）”；
- 至少设置一种 MIME 类型，常用
'text/plain'、'text/html'、'application/json'；也可自定义如'myapp/item-id' - 值可以是字符串，JSON 需自行
JSON.stringify()；二进制数据不支持直接传，得转 base64 或用setDragImage()配合其他方案 - 别漏掉
event.preventDefault()在ondragover里——否则ondrop根本不会触发
function handleDragStart(event) {
event.dataTransfer.setData('text/plain', 'item-123');
event.dataTransfer.setData('application/json', JSON.stringify({id: 123, type: 'card'}));
}
drop 区域需同时监听 dragover 和 drop
只写 ondrop 不够。浏览器默认阻止所有元素的 drop 行为，所以必须在目标区域监听 ondragover 并调用 event.preventDefault()，否则光标一直显示“禁止”图标，松手就无效。
注意 ondragover 只是“允许悬停”，真正取数据在 ondrop 里；两者缺一不可，且不能只靠冒泡——目标元素自己得绑定这两个事件。
-
ondragover里只需event.preventDefault()，其他逻辑（比如高亮提示）可加，但别在这里读dataTransfer -
ondrop中记得再次event.preventDefault()，否则可能触发默认行为（如打开文件链接） - 如果目标是
div且内部有子元素，建议把事件绑定在目标div上，而非依赖事件冒泡，避免子元素拦截
跨浏览器兼容性与 dataTransfer 的限制
dataTransfer 对象在不同浏览器中行为一致，但有硬性限制：它只在拖放过程中有效，且只能在 dragstart、dragover、drop 等拖放事件中访问。一旦拖放结束，里面的数据就清空了，无法事后读取。
另外，安全策略禁止从 drop 事件中读取某些敏感类型（如 'Files' 以外的本地路径），且跨源拖放（比如从桌面拖文件进网页）仅支持 Files 和基础文本类型。
- 想传复杂对象？老老实实序列化成字符串再
setData()，别指望传引用或函数 - Firefox 对自定义 MIME 类型更严格，建议优先用标准类型；Chrome 和 Safari 支持更好些
- 移动端 Safari 基本不支持原生拖放 API，得用第三方库（如
interact.js）或 touch 事件模拟
draggable 属性、dataTransfer.setData() 调用时机、dragover 的 preventDefault() 这三点漏掉任何一个，整个流程就卡死。尤其容易忽略的是：拖拽源和投放目标的事件绑定必须各自独立完成，不能只写一半。 
