JQuery UI изменяемых/# Ограничить-область -> Ограничить не Smalle чем элементы 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); 
     } 
    });