javascript - Jquery可调整大小的自动调整大小父

Question

我有几个嵌套的可调整大小的 div 需要调整大小以适应孩子的大小。一切正常，直到我尝试调整外部 div 的一个（垂直）然后它卡住了。

这是一个小提琴。

$(function () {
$('.block').resizable();
$('.block').resize(resize_handler);
});

function checkChildren(object) {
$(object).children(".block").each(function (index, item) {
    var itemH = $(item).position().top + $(item).height();
    var itemW = $(item).position().left + $(item).width();

    if ($(object).width() < itemW) {
        $(item).width($(object).width());
        checkChildren($(item));
    }
    if ($(object).height() < itemH) {
        $(item).height($(object).height());
        checkChildren($(item));
    }
});
}

function checkParent(e) {

var object = $(e);
var par = object.parent();

var totalW = object.width() + object.position().left;
var totalH = object.height() + object.position().top;

if (totalH > par.height()) {
    par.height(totalH);
    checkParent(par);
}

if (totalW > par.width()) {
    par.width(totalW);
    checkParent(par);
}
}

function resize_handler(e, ui) {
e.stopPropagation();

var object = $(this);
var par = object.parent();

if (par.hasClass("block")) {
    checkParent(object);
}
if (object.children('.block').length > 0) {
    checkChildren(object);
}

}

Answer 1

当然你已经想到了这一点，但是如果它的高度太接近它的孩子的高度，你可以尝试限制父 div 的可调整大小。这意味着当它即将与孩子的边缘接触时，不要让它靠近。也许在几个像素的孩子周围保持一个缓冲区，这将迫使用户先调整孩子，然后才能将父母调整得更小。

只是一个想法。