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

您必须在start函数中使用外部对象的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"
});

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

1 个答案: