Javascript JqueryUI可拖动-自动调整父容器大小

我有两个div，一个在另一个里面。外部div（容器）具有任意尺寸。内部div设置为小于其容器的指定维度

我已经将jquery draggable应用于内部div，并且我希望在将内部div拖过容器的外边缘时自动调整其父容器的大小。我该怎么做呢

---

当我问一个新问题时，我在StackOverflow上看到了类似的特性。用于键入问题的textarea有一个名为“grippie”的div，用于调整textarea的大小。这正是我正在寻找的功能，但是使用div而不是textarea

您可以使用jquery draggable附带的拖动功能。 在拖动函数中，您只需检查内部div的边是否在容器div的边之外

如果是，则增加容器分区的宽度或高度

您可以使用jqueryui中固有的position方法来检查两个div标记的顶部、底部、左侧和右侧的位置

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

->事件->拖动

---

给你。水平和垂直工作。看看它在哪里起作用

---

+! 用于工作演示；尽管它只处理四条边中的一条。但这是一个良好的开端@david Thomas，这就是拖动自动重新调整大小背后的概念。同样的方法也可以通过使用左边的位置和宽度在水平方向上实现。这就是我投票的原因。这个评论只是建议你可以更进一步，帮助OP走出困境。至少，这不是批评的意思。@david Thomas，好吧，我明白了。给你。还更新了上述代码。：-）@Richard如果此解决方案对您有效，请确保您接受答案。

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