JqueryUI Draggable – 自动调整父容器大小
我有两个div，一个在另一个内。 外部div（容器）具有任意尺寸。 内部div设置为小于其容器的指定尺寸。
我已经将jquery draggable应用于内部div，当我将内部div拖过容器的外边缘时，我正在寻找自动调整其父容器的大小。 我该怎么做呢？
在问一个新问题时，我在StackOverflow上看到了类似的function。 用于输入问题的textarea有一个名为’grippie’的div，它调整了textarea的大小。 这正是我正在寻找的function，但使用div而不是textarea。
干得好。 水平和垂直工作。 请参阅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); } } }); 您可以使用jquery draggable附带的拖动function。 在拖动function中，您只需检查内部div的边缘是否在容器div的边缘之外。
如果是，请增加容器div的宽度或高度。
您可以使用jquery ui中的native方法来检查两个div标签的顶部，底部，左侧和右侧的位置。
以下是api的链接，以获取有关这些方法如何工作的更多详细信息。
- 可拖动 – >事件 – >拖动
- 位置