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

Question

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

如我所见，通过常规方式是不可能的，我们必须通过jQuery做其他事情。 我已经尝试了事件resize ，以获取current height of resizing element并比较它是否接近parent高度，如果close ，我会增加parent height ，并且可以。

但是问题是，它确实发生了（高度增加），但是当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({ maxWidth: 500, minHeight: 32, minWidth: 15, containment: "#body", resize: function( event, ui ) { if (ui.size.height >= body_height-50) { body_height += 100; $('#body').css('height', body_height); } } }); $('.blocks2').resizable({ maxWidth: 500, minHeight: 32, 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可以得到您想要的。

 #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({ maxWidth: getMaxWidth($('#body .blocks:eq(0)')), minHeight: 32, minWidth: 15, stop: updateMaxWidth }); $('#body .blocks:eq(1)').resizable({ maxWidth: getMaxWidth($('#body .blocks:eq(1)')), minHeight: 32, 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> 

或在Codepen中查看此演示 。

Answer 3

只需在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({ maxWidth: $('#body').width(), minHeight: 32, minWidth: 15, }); }); </script>