当使用 jQuery UI 的 draggable 插件拖拽元素后，其内部会在拖拽结束时强制为元素添加 height 行内样式（如 height: 120px），覆盖原有的 height: auto 行为，从而导致后续动态插入内容时 DIV 无法自动撑开。

当使用 jQuery UI 的 draggable 插件拖拽元素后，其内部会在拖拽结束时强制为元素添加 `height` 行内样式（如 `height: 120px`），覆盖原有的 `height: auto` 行为，从而导致后续动态插入内容时 DIV 无法自动撑开。

jQuery UI 的 draggable() 方法在拖拽停止（stop）阶段会调用内部布局计算逻辑，并主动写入一个固定的 height 值到元素的 style 属性中——这是为了维持拖拽过程中的视觉稳定性，但副作用是破坏了原本依赖 height: auto 实现的流式自适应能力。

解决的关键在于：在 stop 回调中主动重置 height 为 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() {
  const $dragDiv = $('#my-DIV');

  // 启用拖拽，并在拖拽结束时清除固定高度
  $dragDiv.draggable({
    stop: function(event, ui) {
      $(this).css('height', 'auto'); // ✅ 核心修复：恢复自动高度
    }
  });

  $('#submit-form').on('click', function() {
    submit();
  });

  function submit() {
    const text = `Testing<br>Testing<br>Testing`;
    const newDiv = document.createElement('div');
    newDiv.innerHTML = text;
    $dragDiv[0].appendChild(newDiv); // 使用原生 appendChild 更清晰
  }
});

同时建议优化 CSS 中的冗余声明（如重复的 display）并确保布局兼容性：

.div {
  background-color: black;
  border: 1px solid white;
  padding: 3px;
  max-width: 500px;
  width: fit-content; /* 可选：更精确控制宽度行为 */
  min-height: auto;   /* 显式强调最小高度由内容决定 */
}

⚠️ 注意事项：

• 不要仅依赖 min-height 或 max-height，draggable 写入的是 height，必须显式设为 'auto' 才能覆盖；
• 若容器内含浮动或绝对定位子元素，需额外触发 BFC（如 overflow: hidden）以保障高度正确包裹；
• 在较新项目中，推荐优先使用原生 drag API 或现代 CSS resize + contain 等方案替代 jQuery UI，以减少此类副作用。

通过在 stop 钩子中重置高度，即可彻底解决拖拽后容器“冻结”不扩展的问题，兼顾交互自由与布局弹性。