当绝对定位的可拖拽元素移出 position: relative 父容器时，因 css 自动换行与尺寸收缩机制导致视觉上“变小”，可通过强制固定宽度阻止此行为。
当绝对定位的可拖拽元素移出 position: relative 父容器时，因 css 自动换行与尺寸收缩机制导致视觉上“变小”，可通过强制固定宽度阻止此行为。
在实现基于原生 JavaScript 的拖拽功能时，一个常见却易被忽视的问题是：绝对定位（position: absolute）的可拖拽元素，在拖出其 position: relative 父容器边界后，内容区域意外收缩（尤其表现为文本换行、宽度塌陷）。这并非浏览器 Bug，而是 CSS 布局的自然行为——当绝对定位元素脱离相对定位父容器的“布局上下文”范围时，其宽度不再受父容器约束，而默认由内部内容（如长文本）的换行规则决定；若父容器设置了 max-width 或 width，子元素一旦移出该范围，就可能触发回退到最小内容宽（min-content）的渲染逻辑，造成视觉上的“缩小”。
根本解决方案非常简洁：在拖拽过程中，显式锁定元素的宽度，使其脱离自动计算逻辑，保持拖拽前的固有尺寸。
你只需在 elementDrag 函数中添加一行代码，强制将当前元素的 style.width 设置为其当前渲染宽度（即 offsetWidth）：
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// 计算位移
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// 关键修复：固定宽度，防止脱离父容器后收缩
elmnt.style.width = elmnt.offsetWidth + 'px';
// 更新位置
elmnt.style.top = (elmnt.offsetTop - pos2) + 'px';
elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px';
}✅ 为什么有效？
offsetWidth 返回元素当前渲染后的实际像素宽度（含 padding、border，不含 margin），属于只读属性，但将其赋值给 style.width 后，CSS 引擎会将其视为明确声明的内联宽度，从而覆盖任何由父容器或自动换行引发的隐式尺寸调整，确保元素无论处于视口何处，宽度始终恒定。
⚠️ 注意事项：
- 此方案适用于内容宽度相对稳定、不依赖动态响应式伸缩的场景（如标签、注释框、工具提示等）；
- 若元素需支持响应式缩放（例如随窗口 resize 改变宽度），应在 window.onresize 中重新同步 style.width，或改用更健壮的拖拽库（如 Interact.js）；
- 避免在拖拽中频繁读写 offsetWidth（虽现代浏览器优化良好），如性能敏感，可于 dragMouseDown 中缓存初始宽度：
const initialWidth = elmnt.offsetWidth; // … 在 elementDrag 中使用：elmnt.style.width = initialWidth + 'px';
? 进阶建议：
为提升体验，还可结合 contain: layout paint 提升拖拽性能，并为拖拽中元素添加 user-select: none 防止误选文本。完整修复后的拖拽逻辑兼顾稳定性、可维护性与视觉一致性，是原生实现轻量级 UI 拖拽的可靠实践。
