javascript - JQuery UI 可调整大小的网格，不一致的行为取决于网格值

Question

我需要一个可调整大小的栏，它可以一直到没有栏。取决于我如何设置网格，有时我可以，有时我不能。我尝试的值是条形初始大小的倍数。

这里有例子

工作: https://jsfiddle.net/dg851voo/

$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
  handles: 'n',
  grid: [0, 60]
});

不工作: https://jsfiddle.net/xmzj3x54/

$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
  handles: 'n',
  grid: [0, 20]
});

对于初始条形大小的任意倍数，我需要能够一直达到零高度。

Answer 1

我能够水平但不能垂直工作。可能是 jQuery 本身的错误？相反，我想出了一个稍微有点老套的解决方案，应该可以完成这项工作。

基本上，如果您的网格大小是 20，那么最小高度似乎是 20px - 即使 minHeight 设置为 0。您将可调整大小的 div 放在一个 wrap div 中，将可调整大小的 div 向下移动20px，然后将换行设置为 overflow: hidden。然后，如果您想检索 div 的感知高度，则必须从实际高度中减去 20。示例如下。

var gridY = 20;

$("#resizable").resizable({
  handles: 'n',
  grid: [0, gridY],
  minHeight: gridY,
  maxHeight: 120,
  resize: function(e, ui){
  	var actualHeight = ui.size.height;
  	var perceivedHeight = actualHeight - gridY;
  	$("p").text(`${perceivedHeight}%`);
    
    // because the height of my div is
    // 100 I dont have to convert it to
    // percentage, but if it was anything
    // other than 100 you would have to 
  }
});

#resizable-wrap{
  width: 100px; 
  height: 100px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

#resizable {
  position: absolute;
  top: 0;
  left: 25px;

  width: 50px; 
  height: 120px;  

  background-color: #F3EF7D;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="resizable-wrap">
<div id="resizable" class="resizableBox"></div>
</div>
<p>100%</p>