原生HTML实现可拖拽面板应使用mousedown/mousemove/mouseup手动控制位移，而非draggable="true"，因后者仅支持标题栏拖拽、易脱钩、不支持范围限制与防卡顿；关键三步：mousedown时计算offsetX、事件绑定到document、mousemove中校验边界并缓存视口尺寸。
原生 HTML 实现可拖拽面板，核心不是加 draggable="true"，而是用 mousedown/mousemove/mouseup 手动控制位移——因为 dragstart/drop 无法响应面板内任意位置拖拽，也不支持限制范围、防卡顿、防移出断连。
为什么不能直接用 HTML5 drag/drop 做面板拖拽
HTML5 的 dragstart 只在元素被“选中后拖动”时触发，且默认行为会拉出半透明 ghost 图像，位置不可控；drop 必须落在显式监听的容器上，而面板需要“按住任意空白处即可拖”，这和看板卡片拖拽是两类问题。常见错误是给整个面板设 draggable="true"，结果只能拖标题栏、松手后跳回原位、鼠标一快就脱钩。
-
draggable="true"对非图片/链接元素需额外样式（如-webkit-user-drag: element）才生效，兼容性差 -
dataTransfer无法传 DOM 节点或实时坐标，做不到像素级定位 - 拖拽过程中无法动态计算视口边界，
left/top容易写成负值或超大值，导致面板消失
mousedown + mousemove 实现稳定拖拽的关键三步
真正可用的方案是监听鼠标事件，手动更新 style.left 和 style.top，但必须守住三个关键点：偏移量计算、事件绑定目标、坐标校验时机。
- 在
mousedown中立刻计算：const offsetX = e.clientX - panel.getBoundingClientRect().left，不是用e.offsetX（它相对于事件目标，面板有 padding 时不准） -
mousemove和mouseup必须绑定到document，不是面板本身——否则鼠标快速移出面板，事件就中断了 -
mouseup触发后，立刻调用document.removeEventListener('mousemove', ...)和document.removeEventListener('mouseup', ...)，否则下次点页面其他地方可能意外触发移动
限制拖拽范围：别用 window.innerWidth，要缓存视口尺寸
限制面板不拖出屏幕，不是靠 CSS overflow，而是在 mousemove 里实时约束 left 和 top。但每次调用 getBoundingClientRect() 或读 document.documentElement.clientWidth 都有性能开销，尤其在高频 mousemove 中。
立即学习“前端免费学习笔记（深入）”；
- 提前缓存：
const { clientWidth, clientHeight } = document.documentElement;和const panelRect = panel.getBoundingClientRect();（注意：后者必须在mousedown时读一次，不能在mousemove里反复读） - 计算合法区间：
const maxX = clientWidth - panelRect.width;，const maxY = clientHeight - panelRect.height; - 校验逻辑写成：
newLeft = Math.max(0, Math.min(newLeft, maxX));，newTop = Math.max(0, Math.min(newTop, maxY)); - 别用
window.innerWidth—— 它包含滚动条宽度，小屏下误差明显；也别用body.clientWidth—— 有 margin 或overflow-x: hidden时不可靠
防文本选中和鼠标穿透：CSS 层面两个必加声明
拖拽时鼠标划过面板文字，很容易意外选中文本，干扰操作；如果面板盖在 iframe 或 canvas 上方，还可能被底层元素拦截鼠标事件。
- 给面板加
user-select: none;（所有现代浏览器支持），禁用文本选择，避免拖拽中断 - 拖拽手柄区域（如标题栏）若含子元素（图标、按钮），需设
pointer-events: none;，再给子元素单独设pointer-events: auto;，否则点击无效 - 如果面板父容器用了
transform或will-change，确保没触发层叠上下文隔离，否则mousemove可能收不到事件
最易被忽略的是：拖拽结束后的焦点管理。面板移动后，键盘用户可能失去上下文；若面板含输入框，松手瞬间应判断是否需自动聚焦——这不是锦上添花，而是可访问性的硬性要求。
