draggable属性是HTML5声明元素可拖拽的布尔型开关，仅设为true不触发拖拽，须配合dragstart事件及dataTransfer操作；目标区需在dragover中preventDefault才能响应drop。
draggable 属性是 HTML5 原生支持的布尔型属性，用于声明一个元素是否可被浏览器识别为“可拖拽源”。但它本身不触发任何行为，只是开启拖放 API 的入口开关——真正启用拖拽交互，必须配合事件监听和 dataTransfer 操作。
draggable 属性的取值与含义
该属性有三个合法值：
-
true：明确声明元素可拖拽（例如
<div draggable="true">） <li> <strong>false</strong>：明确禁用拖拽，即使内容是图片或链接也会失效</li> <li> <strong>auto</strong>：由浏览器决定，默认仅对图片、链接、选中文本启用拖拽</li> <p>注意：仅设置 <code>draggable="true"后，鼠标悬停时不会出现拖拽光标，也无法触发 dragstart 事件——这是常见误区。必须绑定 dragstart 才能真正启动拖拽
draggable 属性只解决“能不能拖”的权限问题，而 dragstart 事件才是“开始拖”的实际起点。未监听该事件，拖拽会静默失败（Chrome/Firefox 不报错，但鼠标无法抓起元素）。
立即学习“Java免费学习笔记（深入）”；
java-api-doc-generator下载分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 在
dragstart中必须调用e.dataTransfer.setData()写入数据（如 ID、文本、JSON 字符串） - 可选设置视觉反馈：
e.dataTransfer.effectAllowed = "move"或"copy" - 也可用
e.dataTransfer.setDragImage()替换默认半透明拖影
目标区域需主动“接住”拖拽
即使源元素已正确配置，目标容器默认仍会拒绝放置。要让它响应 drop，关键两步缺一不可：
- 在
dragover（以及可选的dragenter）中调用e.preventDefault() - 在
drop中读取数据并执行 DOM 操作（如appendChild、insertBefore）
漏掉
dragover.preventDefault()，drop 事件根本不会触发——这不是 bug，而是浏览器的安全策略。动态控制拖拽状态的节点操作技巧
可通过 JS 动态修改 draggable 属性来启用或禁用拖拽能力：
- 启用：
el.setAttribute('draggable', 'true')或el.draggable = true - 禁用：
el.removeAttribute('draggable')或el.draggable = false - 检查状态：
el.hasAttribute('draggable')或直接读el.draggable（返回布尔值）
注意：修改属性后无需重新绑定事件，已注册的 dragstart/dragover 等监听器仍有效；但若禁用时正在拖拽，当前操作会立即中断。
- 在
