draggable属性仅开启元素可拖动状态，不自动触发拖放逻辑；必须手动绑定dragstart、dragover（需preventDefault）和drop事件，并正确使用dataTransfer setData/getData，且移动端原生不支持。
draggable 属性本身不能直接实现拖放交互，它只是开启 HTML 元素的原生拖拽“触发权”——没有后续的 drag 事件监听和 drop 区域处理，元素拖不了，也放不进去。
draggable="true" 只是第一步，不是拖放功能的全部
浏览器默认只允许图片、链接、选中的文本被拖拽。draggable 属性的作用就是告诉浏览器：“这个元素也允许被鼠标拖拽启动”。但它不提供任何逻辑，也不自动响应释放动作。
-
draggable是布尔属性：设为"true"或直接写draggable都生效；设为"false"或省略则禁用（默认值） - 仅设置
draggable="true"后，鼠标悬停会变成抓手图标（grab），按住拖动时会出现半透明“拖影”，但松开后什么都不会发生 - 必须配合
dragstart、dragover、drop等事件才能完成数据传递和位置更新
为什么设置了 draggable 却拖不动？常见原因排查
典型现象：元素有 draggable="true"，但鼠标按住没反应，或拖动时没拖影。大概率是以下某个环节缺失：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 没在
dragstart事件中调用event.dataTransfer.setData()—— 浏览器认为“没东西可拖”，直接忽略整个拖拽流程 - 目标容器没监听
dragover事件，或监听了但没调用event.preventDefault()—— 浏览器默认阻止该事件，导致drop无法触发 - 元素被
pointer-events: none或父级遮挡，实际未接收到鼠标事件 - 在移动端或某些 WebView 中，
draggable原生支持不稳定，需额外 polyfill 或改用 touch 事件模拟
一个最小可用拖放示例（含关键事件链）
下面代码实现一个可拖动的 <div> 放入指定区域：
<pre class='brush:php;toolbar:false;'><div draggable="true" id="item">拖我</div>
<div id="dropzone">投放区</div>
<script>
const item = document.getElementById('item');
const dropzone = document.getElementById('dropzone');
item.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'item-id-1'); // 必须设数据
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键：允许投放
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
console.log('投放成功，数据：', e.dataTransfer.getData('text/plain'));
});
</script></pre>
<p>注意：<code>e.preventDefault() 在 dragover 中不可省略，这是最常漏掉的一行。
drag 和 drop 的兼容性与性能提醒
原生拖放 API 在现代桌面浏览器中支持良好，但有几个现实约束得提前知道：
- IE11 及更早版本对
dataTransfer类型限制极严，建议只用'text/plain'；Chrome/Firefox 支持'text/html'、自定义类型如'application/json' - 频繁触发
drag事件（如拖动过程中实时计算坐标）可能造成卡顿，应节流或用requestAnimationFrame控制更新频率 - 如果需要跨 iframe 拖放，两个页面需同源，否则
dataTransfer数据会被清空 - 移动端 Safari 对
draggable支持有限，很多场景下需回退到touchstart/touchmove手动实现
真正让拖放“可用”的，从来不是那个 draggable 属性，而是你有没有在正确时机调用 preventDefault()、有没有传对 dataTransfer 的类型和值、以及是否处理了浏览器默认行为的干扰。这些细节一旦错位，整个流程就静默失败。
