draggable="true" 必须作为 html 属性显式声明，不能通过 js 动态赋值；表单控件需用容器代理并设 draggable="true"；dragover 中必须同步调用 preventdefault()；datatransfer 的 mime 类型须严格一致。
draggable="true" 必须写在 HTML 属性里，不能靠 JS 动态赋值
很多开发者试过 element.draggable = true，发现拖拽还是不生效——这不是 JS 写错了，而是浏览器根本不认这个赋值。HTML5 的 draggable 是一个**反射属性（reflected attribute）**，只有作为 HTML 属性显式声明时，才会激活底层拖拽引擎。
-
draggable默认值是auto，对<img>和<a></a>会自动启用，其他元素（如<div>、<code><span></span>、表单控件）必须写死draggable="true" - 动态插入的元素（比如用
innerHTML或appendChild添加），必须在插入 DOM 的同时带上该属性，不能“先插入再补” - 写成
draggable=""或draggable="1"是无效的，只接受true、false、auto三个字符串值 - 正确做法是把控件包进一个
<div> 或 <code><li>容器，对容器设draggable="true"，再通过cloneNode(true)实现“拖拽即复制” - 容器需带唯一
id或data-type，方便dragstart中传参：e.dataTransfer.setData('text/plain', container.id) - 原始控件建议加
disabled，避免用户误点触发焦点或输入，拖入目标区后再移除该属性 -
preventDefault()必须在dragover回调内**立即执行**，放在setTimeout或异步 Promise 里就失效 - 不需要在
dragenter或drop里重复调用preventDefault()，只在dragover这一步起作用 - 如果目标区域需要高亮反馈，用
dragenter加 class、dragleave移 class，别在dragover里反复操作 DOM - 坚持用
'text/plain'或'text/uri-list'，避开'application/json'等自定义类型（Chrome/Safari 不支持） - 结构化数据要 JSON 序列化后传：
e.dataTransfer.setData('text/plain', JSON.stringify({ id: 'field-1', type: 'text' })) - 读取时必须用完全相同的类型字符串：
JSON.parse(e.dataTransfer.getData('text/plain'))，大小写和引号都不能错 - Safari 对
setData调用时机敏感，确保它在dragstart事件中第一时间执行，不要等异步逻辑
表单控件直接加 draggable="true" 会失效，得用容器代理
给 <input>、<select></select>、<textarea></textarea> 这类原生控件直接设 draggable="true"，在 Chrome/Firefox 中基本没反应——浏览器出于输入安全限制，禁用了它们的拖拽通道。
dragover 不调用 preventDefault()，drop 就永远不会触发
这是最常卡住开发者的硬性条件：只要 dragover 事件处理函数里没同步执行 e.preventDefault()，drop 就像被屏蔽了一样，怎么绑监听都没用。
dataTransfer.getData() 拿不到值？检查 MIME 类型是否一致
源端用 e.dataTransfer.setData('text/plain', 'abc')，目标端却读出空字符串，大概率是 MIME 类型不匹配或浏览器兼容问题。
真正麻烦的不是写几行事件监听，而是每个环节都依赖上一环严格合规——漏掉一个 preventDefault()，或类型写错一个字母，整个链路就断了。
