Question

我确实需要使用jQuery UI可调整大小，父级限制仅限于宽度，并将高度保留为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

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

＆＃13;

$(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));
        }
    });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

动态调整maxWidth可以得到你想要的结果。

＆＃13;

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

＆＃13;

<script src="{{ asset('assets/plugins/select2/dist/js/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/select2/dist/js/i18n/it.js') }}"></script>

＆＃13;

或在codepen中查看此demo。

Answer 3

只需在maxWidth属性中返回容器的宽度：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: