JqueryUI Draggable - 自動調整父容器的大小

Question

我有兩個div，一個在另一個。外部div（容器）的尺寸是任意的。內部div設置爲小於其容器的指定尺寸。

我已經將jquery draggable應用於內部div，我期望在將內部div拖過容器的外部邊緣時自動調整其父容器的大小。我怎麼能這樣做呢？

在問一個新問題時，我在StackOverflow上看到類似的功能。用於輸入問題的textarea有一個名爲「grippie」的div，它調整了textarea的大小。這正是我正在尋找的功能，但是使用div而不是textarea。

Answer 1

在這裏你去。水平和垂直工作。看到它在行動 http://jsfiddle.net/evunh/1/

var i = $('#inner'); 
var o = $('#outer'); 
i.draggable({ 
    drag: function(event, ui) { 
     if (i.position().top > o.height() - i.height()) { 
      o.height(o.height() + 10); 
     } 
     if (i.position().left > o.width() - i.width()) { 
      o.width(o.width() + 10); 
     } 
    } 
}); 

Answer 2

你可以使用拖動函數，jQuery的可拖動。 在拖動功能中，您可以檢查內部div的邊緣是否在容器div的邊緣之外。

如果是，則增加容器div的寬度或高度。

您可以使用jquery ui中原生的位置方法來檢查兩個div標籤的頂部，底部，左側和右側的位置。

以下是有關這些方法如何工作的更詳細信息的api鏈接。

1. Draggable - >事件 - >阻力
2. Position