jQuery可調整大小：不允許包含div出局

jQuery可調整大小的示例顯示here div如何在容器限制範圍內調整大小。jQuery可調整大小：不允許包含div出局

我需要達到相反的效果：可調整大小的div是容器，當它調整大小時，它不能將包含的div完全或部分地超出邊界。

In this jsfiddle您可以調整容器大小並將容納的div留在外面。我的目標是在容器的邊框觸及包含的div時停止調整大小。

這是HTML：

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

這是JavaScript：

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

任何想法？

來源

2014-10-16 ps0604

您是否希望內部容器按比例調整到外部容器？ – Brian 2014-10-16 17:28:57

是否有任何理由不能使用maxWidth和maxHeight？ http://jsfiddle.net/dzSRR/26/ – Jon 2014-10-16 17:30:30

這與我想出的類似，只是我在CSS中放置了'min-height'和'min-width'。 http://jsfiddle.net/dzSRR/27/ – Brian 2014-10-16 17:31:12

在這裏你去！ jsfiddle

爲了表明它可以動態完成，我製作了in-div可拖動。我也改變了一些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)); 
    } 
});

來源

2014-10-16 18:09:13 Mark

在這裏，你有一個工作小提琴

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});

來源

2014-10-16 18:00:28 Pablo

你的答案也適用，但Mark是第一個發佈答案的人 – ps0604 2014-10-17 00:53:46

jQuery可調整大小：不允許包含div出局

回答

相關問題