Question

jQuery可调整大小的示例显示here如何在容器的限制内调整div的大小。

我需要达到相反的效果：可调整大小的div是容器，当它被调整大小时，它不能完全或部分地使包含的div超出界限。

In this jsfiddle您可以调整容器大小并将包含的div留在外面。我的目标是在容器的边框触及包含的div时停止调整大小。

这是HTML：

<div id="out-div">
    <div id="in-div"></div>
</div>

这是javascript：

$("#out-div").resizable();

有什么想法吗？

Answer 1

这里有一个工作小提琴

http://jsfiddle.net/dzSRR/31/

您需要考虑容器内的元素位置及其尺寸。在你的情况下它的边距，但你也可以使用jquery的位置（）。左和位置（）。顶部

$("#out-div").resizable();
var yourpadding = 10;
var height = parseInt($('#in-div').css('margin-top')) + $('#in-div').height() + yourpadding;
var width = parseInt($('#in-div').css('margin-left')) + $('#in-div').width() + yourpadding;

$("#out-div").resizable("option",{ minWidth: width, minHeight: height});

Answer 2

你走了！ jsfiddle

我使用in-div draggable只是为了表明它可以动态完成。我也改变了一些CSS样式。

var inPosition = $("#in-div").position();
var top = inPosition.top;
var left = inPosition.left;
var inWidth = $("#in-div").width();
var inHeight = $("#in-div").height();


$("#in-div").draggable({
    containment: "#out-div",
    scroll: false,
    drag: function(){
        inPosition = $("#in-div").position();
        top = inPosition.top;
        left = inPosition.left;
        inWidth = $("#in-div").width();
        inHeight = $("#in-div").height();
    }
});
$("#out-div").resizable({
    resize: function(){
        $("#out-div").css("min-width", (left + inWidth));
        $("#out-div").css("min-height", (top + inHeight));
    }
});

jQuery可调整大小：不允许包含div

2 个答案: