当使用 JavaScript 拖拽 position: absolute 元素时，若其移出 position: relative 父容器边界，浏览器可能因布局重排导致元素宽度塌缩；根本解法是在拖拽过程中显式锁定元素宽度。
当使用 javascript 拖拽 `position: absolute` 元素时，若其移出 `position: relative` 父容器边界，浏览器可能因布局重排导致元素宽度塌缩；根本解法是在拖拽过程中显式锁定元素宽度。
在 Web 开发中，将可拖拽元素设为 position: absolute 并嵌套于 position: relative 容器内是常见做法。但许多开发者会遇到一个隐性陷阱：当拖拽元素完全移出父容器可视区域（尤其是向右或向下）时，元素突然“变窄”甚至内容换行、高度异常。这并非 Bug，而是 CSS 渲染机制的自然行为——当绝对定位元素脱离其包含块（containing block）的布局上下文后，其 width 若依赖于内容（如未显式设置 width 或 min-width），浏览器可能基于剩余可见区域或内部 inline 内容重新计算包裹尺寸，从而引发意外收缩。
核心原因：宽度丢失而非“缩放”
该现象本质不是元素被压缩，而是其 width 计算回退到了 auto 行为。例如，.txtbox 设置了 max-width: 250px 但未设 width，当它部分/全部移出父容器时，offsetWidth 可能仍反映原始尺寸，但 style.width 为空，导致后续重排时按最小内容宽渲染。
解决方案：拖拽中主动固化宽度
只需在 elementDrag 函数中，每次更新位置前，强制将当前计算出的宽度写入 style.width，即可切断浏览器的动态宽度推导链：
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 的完整像素宽度（四舍五入为整数），稳定可靠；写入 style.width 后，该内联样式优先级高于 CSS 规则，确保宽度恒定。
进阶建议与注意事项
- 避免重复设置：若元素已带明确 width（如 width: 250px），此修复非必需；但对依赖 max-width / min-width / fit-content 的响应式盒子，必须显式固化。
- 兼容性考量：offsetWidth 在所有现代浏览器中均可用，无需 polyfill。
-
性能提醒：频繁读取 offsetWidth 属于强制同步布局（reflow），但在拖拽场景下（60fps 内）影响微乎其微；如需极致优化，可首次拖拽时缓存宽度：
let cachedWidth = ''; function dragMouseDown(e) { // ...初始化逻辑 cachedWidth = elmnt.offsetWidth + 'px'; // 缓存一次 } function elementDrag(e) { // ...位移计算 elmnt.style.width = cachedWidth; // 复用缓存值 } - 延伸思考：同理，若存在高度塌缩问题，可追加 elmnt.style.height = elmnt.offsetHeight + 'px'，但多数文本容器高度由内容驱动，通常无需干预。
通过这一行关键代码，即可彻底解决绝对定位拖拽元素“越界缩容”的困扰，让交互体验保持稳定、专业且符合预期。
