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

Question

我确实需要使用 jQuery UI resizable with parent limits only to width, and leave height to auto.

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

但问题是，它发生了（高度增加），但是 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

只是 return 容器的宽度 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>

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 中查看此 demo。

Answer 3

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

$(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>

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

jQuery UI resizable - limit to parent width, and leave height to auto

jquery

css

jquery-ui

jquery-ui-resizable