jQuery UI可调整大小 - 限制为父宽度，并将高度保留为自动

Question

我确实需要使用jQuery UI可调整大小，父宽限制仅限于宽度，并将高度保留为自动。

正如我看到这是不可能通过常规方式，我们必须通过jQuery做其他事情。我已经试过通过事件resize，得到current height of resizing element和比较是接近parent高度，如果它是close，我会增加heightparent，我没事。

但是问题是，它发生（身高增加），但是jQuery UI的keeps somewhere当它开始与元素的大小调整父的height，和它没有任何效果，直到您停止调整大小，然后尝试重新（它将重复步骤，增加一次，并且不会识别父母的增加面积，直到它停止，并且再次开始）。

我创建了片段为什么我需要使用containment而不是只有maxWidth。

我希望有人有办法做到这一点，我不介意如果有人有想法通过maxWidth做到这一点，但效果与containment片段相同。

随着containment它可以让我在一排有两大块，当我最后一个调整的结束，也不会传递到第二排，但maxWidth它传递到下一行（这就是为什么maxWidth能帮不了我）。

的片段：

#body { 
 
    width: 500px; 
 
    border: 1px solid red; 
 
    min-height: 50px; 
 
    padding: 10px; 
 
    height: 50px; 
 
} 
 

 
.blocks, .blocks2 { 
 
    border: 1px dashed gray; 
 
    display: inline-block; 
 
    min-height: 32px; 
 
    width: 150px; 
 
} 
 

 
#body2 { 
 
    width: 500px; 
 
    border: 1px solid red; 
 
    min-height: 50px; 
 
    padding: 10px; 
 
    height: auto; 
 
}

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

 
With containment:<br> 
 
<div id="body"> 
 
    <div class="blocks">test my block</div> 
 
    <div class="blocks">resize this to end</div> 
 
</div> 
 

 
<br><br><br> 
 
<div style="color: #003c98;">As you can see, second with max-width, goes to next row, but i want to keep it to end if theres two or more of divs at inline position</div> 
 

 
<div id="body2"> 
 
    <div class="blocks2">test my block</div> 
 
    <div class="blocks2">resize this to end</div> 
 
</div> 
 

 
<script> 
 
var body_height = 50; 
 
$(function(){ 
 
    
 
    $('.blocks').resizable({ 
 
\t maxWidth: 500, 
 
     minHeight: 32, 
 
\t minWidth: 15, 
 
\t containment: "#body", 
 
     resize: function(event, ui) { 
 
     if (ui.size.height >= body_height-50) { 
 
      body_height += 100; 
 
      $('#body').css('height', body_height); 
 
     } 
 
     } 
 
    }); 
 
    
 
    $('.blocks2').resizable({ 
 
\t maxWidth: 500, 
 
     minHeight: 32, 
 
\t minWidth: 15 
 
    }); 
 
    
 
}); 
 
</script>

谢谢大家的时间。

Answer 1

以下代码片段允许将所选块的大小调整到容器的总宽度。它在调整大小操作开始时设置maxWidth，允许块取其右侧的剩余空间。

$(function() { 
 
    var containerWidth = $("#body").width(); 
 
    var getCurrentBlockRight = function ($currentBlock) { 
 
     var $parent = $currentBlock.parent(); 
 
     return $currentBlock.offset().left + $currentBlock.outerWidth() - $parent.offset().left - parseInt($parent.css("padding-left"), 10); 
 
    }; 
 
    $('.block').resizable({ 
 
     maxWidth: containerWidth, 
 
     minHeight: 32, 
 
     minWidth: 15, 
 
     start: function (event, ui) { 
 
      var $currentBlock = $(this); 
 
      var width = $(this).width(); 
 
      $currentBlock.resizable("option", "maxWidth", width + containerWidth - getCurrentBlockRight($currentBlock)); 
 
     } 
 
    }); 
 
});

.block 
 
{ 
 
    border: 1px dashed gray; 
 
    display: inline-block; 
 
    min-height: 32px; 
 
    width: 130px; 
 
} 
 

 
#body 
 
{ 
 
    width: 500px; 
 
    border: 1px solid red; 
 
    min-height: 50px; 
 
    padding: 10px; 
 
    height: auto; 
 
}

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

 
<div id="body"> 
 
    <div class="block">test1</div> 
 
    <div class="block">test2</div> 
 
    <div class="block">test3</div> 
 
    <div class="block">test4</div> 
 
    <div class="block">test5</div> 
 
    <div class="block">test6</div> 
 
    <div class="block">test7</div> 
 
</div>

Answer 2

在maxWidth财产只返回容器的宽度：

$('.blocks').resizable({ 
    maxWidth: $('#body').width(), 
    minHeight: 32, 
    minWidth: 15, 
}); 

#body { 
 
    width: 500px; 
 
    position: relative; 
 
    border: 1px solid red; 
 
    min-height: 50px; 
 
    padding: 10px; 
 
} 
 

 
.blocks { 
 
    width: 500px; 
 
    border: 1px dashed gray; 
 
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="body"> 
 
    
 
    <div class="blocks"> 
 
    test my block 
 
    </div> 
 
    
 
</div> 
 

 

 
<script> 
 
var body_height = 50; 
 
$(function(){ 
 
    
 
    $('.blocks').resizable({ 
 
\t maxWidth: $('#body').width(), 
 
     minHeight: 32, 
 
\t minWidth: 15, 
 
    }); 
 
}); 
 
</script>

Answer 3

动态地调整maxWidth可以得到你想要的东西。

#body { 
 
    width: 500px; 
 
    border: 1px solid red; 
 
    min-height: 50px; 
 
    padding: 10px; 
 
} 
 

 
.blocks { 
 
    border: 1px dashed gray; 
 
    display: inline-block; 
 
    min-height: 32px; 
 
    width: 150px; 
 
    vertical-align: top; 
 
}

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

 
<div id="body"> 
 
    <div class="blocks">test my block</div> 
 
    <div class="blocks">resize this to end</div> 
 
</div> 
 

 
<script> 
 
    //calculate flexibly 
 
    var gap = 6; 
 
$(function(){ 
 
    
 
    $('#body .blocks:eq(0)').resizable({ 
 
\t maxWidth: getMaxWidth($('#body .blocks:eq(0)')), 
 
     minHeight: 32, 
 
\t minWidth: 15, 
 
    stop: updateMaxWidth 
 
    }); 
 
    $('#body .blocks:eq(1)').resizable({ 
 
\t maxWidth: getMaxWidth($('#body .blocks:eq(1)')), 
 
     minHeight: 32, 
 
\t minWidth: 15, 
 
    stop: updateMaxWidth 
 
    }); 
 
    function getMaxWidth(e) { 
 
    return $('#body').width() - e.siblings().outerWidth() - gap; 
 
    } 
 
    function updateMaxWidth(e, ui) { 
 
    ui.element.siblings().resizable('option', 'maxWidth', getMaxWidth(ui.element.siblings())); 
 
    } 
 
    
 
}); 
 
</script>

或看到这个demo在codepen。