jQuery UI 的 draggable() 在拖拽结束后会自动为元素内联设置固定高度（如 height: 120px），覆盖原本的 height: auto 行为，导致后续动态追加内容时 DIV 无法自适应撑开。

jquery ui 的 `draggable()` 在拖拽结束后会自动为元素内联设置固定高度（如 `height: 120px`），覆盖原本的 `height: auto` 行为，导致后续动态追加内容时 div 无法自适应撑开。

当使用 jQuery UI 的 .draggable() 方法增强一个可拖拽容器（如

）后，你可能会遇到一个隐蔽但常见的问题：该容器在拖拽操作完成后，其 height 被 jQuery UI 自动设为一个具体像素值（例如 height: 156px）并写入 style 属性中。这会强制覆盖 CSS 中定义的 height: auto 或依赖内容撑开的布局行为——即使你后续通过 JavaScript 动态向其中追加 DOM 元素（如点击按钮插入多行文本），容器也不会再自动扩展高度，造成内容溢出或被截断。

根本原因在于 jQuery UI Draggable 的内部逻辑：在拖拽结束（stop 事件）时，为保障视觉稳定性，它会根据拖拽前的尺寸快照“固化”当前高度（尤其在启用了 helper: 'clone' 或某些 containment 场景下更明显），而该内联样式优先级高于外部 CSS，导致 display: flex 或 block 下的内容自适应失效。

✅ 推荐解决方案：在 stop 回调中重置高度为 auto

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ready(function() {
  $('#my-DIV').draggable({
    stop: function(event, ui) {
      $(this).css('height', 'auto'); // 关键修复：恢复高度自适应
    }
  });

  $('#submit-form').on('click', function() {
    const text = `Testing<br>Testing<br>Testing`;
    const newDiv = document.createElement('div');
    newDiv.innerHTML = text;
    document.getElementById('my-DIV').appendChild(newDiv);
  });
});

⚠️ 注意事项：

• 不要仅依赖 min-height 或 max-height 替代 height: auto，因为内联 height 仍会压制 min-height；
• 若容器还设置了 overflow: hidden，需确保移除或设为 visible/auto，否则新增内容可能不可见；
• 避免重复初始化 draggable（如嵌套 $(function(){})），原代码中 $(function(){ $(dragDIV).draggable(); }) 是冗余的，已精简；
• 现代项目建议优先考虑原生 dragstart/dragend + transform 实现拖拽（避免 jQuery UI 依赖），但若需快速兼容，上述 stop 重置法最轻量可靠。

总结：jQuery UI 的便利性伴随隐式样式副作用，理解其生命周期钩子（尤其是 stop）并主动干预内联样式，是解决此类“拖后失高”问题的核心思路。