如何限制调整最小高度并转换为纯javascript

Question

Javascript 报表设计器带包含可以在设计器中更改的绝对定位字段。

html:

<div class='designer-panel-body' style='height:100px'>
  <div class='designer-label' style='top:10px'>
    Field1
  </div>
  <div class='designer-label' style='top:60px; left:20px'>
    Field2
  </div>
</div>

CSS：

.designer-panel-body {
  border: solid 1px;
}

.designer-label {
  position: absolute
}

Javascript：

$(".designer-panel-body").resizable({
  start: function(event, ui) {
    $(this).resizable("option", "minHeight", 80)
    },
      handles: "s"
});

小提琴：https://jsfiddle.net/xk98f2rq/

带高度也可以通过鼠标改变。 如何设置最小高度以使带区高度不能短于最后一个字段顶部位置？

示例中的代码为此使用硬编码值 80。如果字段在运行时发生更改，例如删除 Field2，则该值较小，以便面板可以调整大小到 Field1 的顶部。

start方法如何计算minHeight？ 是否合理/如何重构此代码，以便它使用纯 javascript，而不使用 jquery 和 jquery ui？

Answer 1

通过使用

position: absolute

父级 div 不会使其高度适应子级的高度。解决方案是在函数

outerHeight

中计算子项的高度（包括

offset

加

get_height()

），并将计算出的高度应用于容器。

删除

.designer-label

项目（通过单击它们）时，可调整大小元素的

minHeight

会被调整。

function get_height() {
  var minHeight = 0;
  var h;
  $('.designer-panel-body').find('.designer-label').each(function() {
    h = $(this).outerHeight(true) + $(this).offset().top;
    if (h > minHeight) {
      minHeight = h;
    }
  });
  return minHeight;
}

$(".designer-panel-body").height(get_height());

$(".designer-panel-body").resizable({
  minHeight: get_height(),
  handles: "s"
});

$('.designer-label').on('click', function() {
  $(this).remove();
  $(".designer-panel-body").resizable("option", "minHeight", get_height());
});

.designer-panel-body {
  border: solid 1px;
  position: relative;
}

.designer-label {
  position: absolute;
  border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link href="https://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<div class='designer-panel-body'>

  <div class='designer-label' style='top:10px'>
    Field1
  </div>
  <div class='designer-label' style='top:60px; left:20px'>
    Field2
  </div>

</div>