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