javascript - JQuery UI 可调整大小/#constrain-area -> 约束不小于子 div 元素

Question

到目前为止，JqueryUI 可以正常工作，我可以调整大小 <div></div>元素不大于其父元素，如本例所示: https://jqueryui.com/resizable/#constrain-area

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

我想做的恰恰相反: <div>orange</div>不应该允许将大小调整得更小，这样它仍然适合 child <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);
        }
    });