HTML原生拖拽需三步：1.设draggable="true"启用拖拽；2.dragstart中调用dataTransfer.setData()存标识；3.目标区dragover时preventDefault()允许drop。
拖拽前必须设置 draggable="true"
HTML 原生拖拽不是“点住就拖”，而是依赖 draggable 属性显式开启。不加这个属性，哪怕绑了 dragstart 事件也完全不会触发——这是最常被忽略的第一步。
注意：draggable 默认对图片、链接等少数元素为 true，但 div、span 等普通容器默认是 false，必须手动设为 true：
<div draggable="true" id="box">可拖拽区域</div>
- 只写
draggable（无值）等价于draggable="true"，但建议显式写出值，避免混淆 - 设为
draggable="false"可禁用原生拖拽（比如防止误拖文本） - 该属性仅控制「是否启动原生拖拽流程」，不影响后续 JS 自定义逻辑
dragstart 里必须调用 setData()
拖拽开始时，浏览器会清空剪贴板数据。如果没在 dragstart 中通过 dataTransfer.setData() 存入标识信息，后续的 dragover 和 drop 就无法判断拖的是什么——你会看到光标变成禁止符号，drop 事件根本不会触发。
最简可行写法：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.getElementById('box').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', 'box-id');
});
- 类型字符串（如
'text/plain'）不能乱写，常见且兼容性最好的是'text/plain'或'text/html' - 值可以是任意字符串，推荐用元素 ID 或 JSON 字符串（如
JSON.stringify({id: 'box', type: 'card'})） - 不调用
setData()→drop被浏览器拦截，控制台无报错，但行为静默失败
目标区必须阻止 dragover 默认行为
drop 事件要生效，目标容器必须在 dragover 阶段调用 e.preventDefault()。否则浏览器按默认逻辑处理（比如打开文件、跳转链接），drop 根本不会触发。
常见错误写法：ondrop="handleDrop()" 却没配 ondragover —— 这样 drop 永远进不来。
document.getElementById('target').addEventListener('dragover', e => {
e.preventDefault(); // 关键：允许 drop 发生
});
document.getElementById('target').addEventListener('drop', e => {
e.preventDefault();
console.log('拖进来了：', e.dataTransfer.getData('text/plain'));
});
-
dragover是高频事件（持续触发），但只需preventDefault()，无需其他逻辑 - 如果目标区需高亮反馈，可在
dragenter和dragleave中切换 class - 移动端不支持原生
drag系列事件，此方案仅适用于桌面端
按钮触发拖拽？得靠 click 模拟 dragstart
HTML 按钮本身不能直接拖拽（button 默认 draggable="false"），也不能靠 JS 主动触发 dragstart（浏览器禁止脚本主动发起拖拽）。真需求其实是：点按钮后，让另一个元素进入可拖拽状态，并自动聚焦/选中它。
典型解法是用按钮控制目标元素的 draggable 属性 + 聚焦 + 视觉提示：
<button onclick="enableDrag('box')">启用拖拽</button>
<div id="box" tabindex="0">待拖拽内容</div>
<script>
function enableDrag(id) {
const el = document.getElementById(id);
el.draggable = true;
el.focus(); // 让键盘用户能 Tab 到它
el.style.outline = '2px solid #007bff'; // 视觉反馈
}
</script>
- 不能用
el.dispatchEvent(new Event('dragstart'))—— 浏览器会忽略 - 如果想“点按钮就开始拖”，实际要引导用户鼠标移到元素上再按住拖，这是原生行为限制
- 需要更自由的拖拽体验（比如任意位置拖、跟随鼠标），就得放弃原生
drag，改用mousedown/mousemove/mouseup手写逻辑
原生拖拽的边界很清晰：它只响应真实鼠标按下并移动的物理操作，不接受程序模拟。所有试图绕过这点的设计，最后都得回归到监听鼠标事件自己算位移。
