拖拽元素超出父容器后视觉收缩是因脱离上下文导致width回退到min-content，应通过mousemove中设置style.width=offsetwidth锁定宽度，并在resize时同步；坐标需转为相对父容器偏移，父容器必须设position:relative。
拖拽元素超出父容器后视觉收缩怎么办
绝对定位的拖拽元素一旦移出 position: relative 父容器，宽度会塌陷、文本换行——这不是 bug，是 CSS 布局行为：脱离父级上下文后，width 回退到 min-content。解决方法不是加 overflow: hidden，而是锁死宽度。
- 在拖拽事件（如
mousemove）中，立即将元素的style.width设为当前offsetWidth：elmnt.style.width = elmnt.offsetWidth + 'px' -
offsetWidth是只读但渲染后的真实像素宽（含 padding/border），赋值给style.width后就覆盖了自动计算逻辑 - 若元素需响应窗口缩放，记得在
window.onresize中重新同步该宽度，否则会失真 - 别用
getComputedStyle(el).width替代——它可能返回auto或百分比，不可靠
为什么 left/top 直接赋值会飞出父容器
根本原因是坐标系错配：getBoundingClientRect() 返回的是视口坐标，而 element.style.left/top 在 position: absolute 下，是以最近的 position: relative 祖先为原点的偏移量。直接把视口坐标塞进去，等于让元素按整个页面定位。
- 必须先获取父容器的
getBoundingClientRect()，再用鼠标坐标减去父容器左上角坐标，得到相对偏移 - 父容器必须设
position: relative，否则参考系会落到body或视口，overflow: hidden也失效 - 拖拽中避免用
offsetLeft/offsetTop读取当前位置——它们四舍五入为整数，且受缩放影响，精度丢失 - 单位不能漏：
element.style.left = x + 'px'，写成x + ''或x都静默失败
dragover 中 preventDefault() 调用时机很关键
HTML5 拖放 API 默认禁止在普通容器上 drop，必须在 dragover 中调用 preventDefault() 才能启用。但无条件调用会破坏滚动、文本选择等基础交互。
- 只在鼠标位于合法区域内时才调用：
const rect = container.getBoundingClientRect(); const inBounds = e.clientX >= rect.left && e.clientX = rect.top && e.clientY - 每次
dragover都要重新算getBoundingClientRect()，不能缓存——可滚动容器尺寸会变，CSS 动画也会改 layout - 顺手设
e.dataTransfer.dropEffect = 'move'，否则光标反馈可能不一致 - 别在
dragenter里调preventDefault()：它可能因子元素冒泡被反复触发，导致误判
移动端和缩放页面下的边界失效问题
父容器设了 transform: scale(0.8) 或页面 zoom 为 125%，getBoundingClientRect() 返回的坐标仍是物理像素，但视觉尺寸已变——约束逻辑会整体缩进或外扩。
- 需要归一化：用
window.devicePixelRatio或手动测缩放因子（如用固定宽 div 的实际 clientWidth / 声明 width） - 对
transform容器，getBoundingClientRect()已包含变换效果，但clientX/Y不受影响，二者仍可直接比较 - iOS Safari 中
position: fixed元素不会被父级overflow: hidden裁剪，这类元素应直接挂载到body下，别嵌套 - 滚动容器内拖拽时，
clientX/Y和getBoundingClientRect()都是视口坐标，无需额外减window.scrollY——这点常被误加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
