javascript - jQuery UI - 动态设置可调整大小元素的 minHeight

Question

我有一个可调整大小的元素，其中有一个可拖动和可调整大小的元素。

可调整大小的元素没有 maxHeight，但我想将 minHeight 设置为子元素的高度加上距顶部的位置。

根据子级的父级设置子级大小的约束非常简单，但父级却不能根据子级设置约束。

这是我的代码:

HTML:

<div id="resizable">
    <div class="draggable"></div>
</div>

jQuery:

var buildMinHeight = 0;
$("#resizable").resizable({
    start: function(e, ui) {
        $(".draggable").each( function() {
            buildMinHeight = ($(this).height()+$(this).position().top > buildMinHeight) ? $(this).height()+$(this).position().top : buildMinHeight;
        });
    }, 
    minHeight: buildMinHeight // THIS IS NOT BEING SET - GUESSING I MIGHT NEED TO SET IT WITHIN THE START EVENT
});

$(".draggable").resizable({
    containment: "#resizable"
}).draggable({
    containment: "parent"
});

初始CSS:

 #resizable {
      width: 250px;
      height: 250px;
      background:red;
  }
  .draggable {
      width:150px;
      height:150px;
      background:blue;
  }

这是一个 jsfiddle... http://jsfiddle.net/many_tentacles/vKLB4/2/

Answer 1

您必须在启动函数中使用外部对象的 css 属性:

$("#resizable").css({
    minHeight: buildMinHeight,
});

完整的 JavaScript 代码如下所示:

var buildMinHeight = 0;
$("#resizable").resizable({
    start: function (e, ui) {
        $(".draggable").each(function () {
            buildMinHeight = ($(this).height() + $(this).position().top > buildMinHeight) ? $(this).height() + $(this).position().top : buildMinHeight;
            $("p").html(buildMinHeight);
        });
        $("#resizable").css({
            minHeight: buildMinHeight,
        });
    }
});

$(".draggable").resizable({
    containment: "#resizable"
});

$(".draggable").draggable({
    containment: "parent"
});