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 draggable附带的拖动功能。在拖动功能中，您只需检查内部div的边缘是否在容器div的边缘之外。

如果是，请增加容器div的宽度或高度。

您可以使用jquery ui中的本地位置方法来检查两个div标签的顶部，底部，左侧和右侧的位置。

以下是api的链接，以获取有关这些方法如何工作的更多详细信息。

Draggable - ＆GT;事件 - ＆GT;拖
Position

JqueryUI Draggable - 自动调整父容器大小

2 个答案: