<dialog> 标签不支持 draggable="true"，因 HTML 规范将其定义为语义化模态容器而非可拖拽元素；需用 mousedown/mousemove/mouseup 手动实现拖拽，注意定位、事件绑定范围、边界校验、showModal() 时机、tabindex 及移动端限制。
<dialog> 标签本身不支持拖拽，写 draggable="true" 在它上面也无效 —— 浏览器根本不认这个组合。
为什么 <dialog> 不能直接加 draggable
HTML 规范里 <dialog> 是语义化模态容器，不是可拖拽元素类型；即使手动加上 draggable="true"，Chrome/Firefox 都不会触发 dragstart。这不是 bug，是设计如此。常见错误是把 <dialog> 当成普通 <div> 来套 drag/drop API，结果监听了所有事件却一个都不进回调。
想拖动 <dialog>，必须用 mouse 事件手动控制
真正能落地的做法是放弃 drag/drop，改用 mousedown/mousemove/mouseup 手动更新位置。关键点如下：
- 必须给
<dialog>设position: absolute或position: fixed，否则left/top无效 - 拖拽起点建议限定在
<dialog>内部的 header 元素（比如<h3>或带class="dialog-header"的<div>），避免误触内容区 -
mousedown中立刻计算偏移：const offsetX = e.clientX - dialog.getBoundingClientRect().left，别用e.offsetX（它相对于目标元素，有 padding 就不准） -
mousemove和mouseup必须绑定到document，不是<dialog>自身——否则鼠标一快就脱钩 - 每次
mousemove里要校验边界：Math.max(0, Math.min(e.clientX - offsetX, window.innerWidth - dialog.offsetWidth))
dialog.showModal() 后再拖拽，要注意 z-index 和 focus 状态
调用 dialog.showModal() 会强制聚焦并置顶，但也会让部分浏览器（如 Safari）拦截 mousedown 事件。解决方法：
立即学习“前端免费学习笔记（深入）”；
- 确保拖拽 handler 在
dialog.showModal()之后再 attach，不要提前绑 - 给 dialog 加
tabindex="-1"，防止键盘焦点干扰鼠标事件流 - 如果 dialog 被遮罩层盖住，检查
z-index：modal dialog 默认 z-index 很高，但自定义拖拽逻辑可能被覆盖，显式设z-index: 10000更稳 - 移动端完全不可行：iOS Safari 和 Android Chrome 均不触发
dialog上的mousedown，这是平台限制，不是代码问题
最易被忽略的一点：拖拽过程中若 dialog 内容重绘（比如 React 更新子组件、Vue 响应式刷新），getBoundingClientRect() 缓存值会失效，导致位置跳变。所以偏移量必须在 mousedown 时读一次，别在 mousemove 里反复读 DOM 尺寸。
