JQuery UI可调整大小/＃constrain-area - ＆gt;约束不比子div元素小

Question

到目前为止JqueryUI的工作原理是我可以使我的可调整大小的<div></div>元素不比它的父元素大，如下例所示：https://jqueryui.com/resizable/#constrain-area

这意味着我无法使蓝色区域大于橙色区域，因为<div>blue</div>是<div>orange</div>的孩子

我想要做的恰恰相反：<div>orange</div>不应该被允许调整小，然后它仍然适合孩子<div>blue</div>和<div>red</div>

这是一个例子：

因为我们从底部/右角调整大小，所以最大减去调整大小应为：

DOM树看起来像这样：

我的问题是，如果可以使用JQueryUI进行这样的限制，如果没有，是否有人知道一个解决方案或其他支持限制的JavaScript库。

Answer 1

您可以使用JQuery here you can find a jsfiddle

来获取该行为

  var minWidth = 0;
  var minHeight = 0;

  $.each( $('#main'), function(i, divs) {
     $('div', divs).each(function() {
        var tmpWidth = $(this).position().left + $(this).width();
            if (tmpWidth > minWidth)
        minWidth = tmpWidth;
      var tmpHeight = $(this).position().top + $(this).height();
            if (tmpHeight > minHeight)
        minHeight = tmpHeight;
     });
  });
  $('.orange').resizable({
            resize : function(event, ui){
            $(this).resizable( "option", "minWidth", minWidth);
            $(this).resizable( "option", "minHeight", minHeight);
        }
    });