[英]Jquery resizeable auto resize parent
我有几个嵌套的可调整大小的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);
}
}
当然,您已经想到了这一点,但是如果父div的高度过于接近其子代的高度,可以尝试限制其可调整大小。 意思是当它要与孩子的边缘接触时,不要让它靠近任何地方。 也许在子像素周围保持几个像素的缓冲区,这将迫使用户先调整子像素,然后再调整较小的父像素。
只是一个想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.