jQuery resizable () динамическая опция maxWidth

Question

У меня есть 3 столбца с изменяемым размером.Когда кто-то становится шире, тот, что слева, становится меньше.По сути, есть только 2 ручки.Левый и средний.Поэтому, когда Mid col становится тоньше, Right col соответственно расширяется.Все три из них содержат родительский div 900px, поэтому сумма всех трех всегда равна 900. У них максимальная и минимальная ширина, установленные статически.

Моя проблема в том, что если вы возьмете левую ручку и переместите еевплоть до правого края вы все еще можете использовать правую ручку и расширить середину столбца за край родительского элемента.

Я подумал, как решить эту проблему, написав функцию, котораяпроверяет ширину столбцов, а затем вычитает левый и правый столбцы из родительской ширины div, я назвал это mWid.Это оставляет меня с номером, который я хочу установить как maxWidth для Mid col.

Теперь проблема в том, что mWid здесь не обновляется "maxWidth: mWid"

Вот как выглядит функция для правой ручки:

$(function() {
    $("#midResizable").resizable({
        handles: 'e',
        containment: '#container',
        maxWidth: mWid, // gets set once, but doesn't update! WHY?
        minWidth: 195,
        resize: function(event, ui) {
            contWidth = $('#container').width()
            newWidth = $(this).width()
            leftWidth = $('#leftResizable').width()
            rightWidth = $('#rightResizable').width()
            $("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
            checkWid()
        }
    });     
});     

function checkWid() {
    rightWidth = $('#rightResizable').width()
    leftWidth = $('#leftResizable').width()
    contWidth = $('#container').width()
    mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}

Answer 1

Проверьте это: http://jqueryui.com/demos/resizable/#option-maxWidth

Похоже, maxWidth: mWid, вызывается только при инициализации.

После этого необходимо явно установить maxWidth, например:

$( "#midResizable" ).resizable( "option", "maxWidth", mWid );

Answer 2

Вы можете использовать приведенный ниже код в методе запуска изменяемого размера. Он будет обновлять maxWidth и maxHeight динамически всякий раз, когда вы пытаетесь изменить размер элемента div.

$('.droppedBtn').resizable({

  .... //you resizable properties

  start: function(event,ui)
  {

    $( ".CLASSNAME" ).resizable( "option", "maxWidth", layout.lWidth);
    $( ".CLASSNAME" ).resizable( "option", "maxHeight", layout.lHeight);

  },

  stop: function(event,ui){

  }

});