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

Question

我有两个 div，一个嵌套在另一个内部。外部 div（容器）的尺寸是任意的。内部 div 的尺寸设置为小于其容器的指定尺寸。

我已经将 jquery draggable 应用于内部 div，并且希望当我将内部 div 拖动到容器的外边缘时自动调整其父容器的大小。我该如何实现这一点？

我在 StackOverflow 上看到了类似的功能，当提问新问题时，输入问题的文本区域有一个名为“grippie”的 div，可以调整文本区域的大小。这正是我要寻找的功能，但是使用 div 而不是 textarea。

- Richard

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

- Hussein

---

+！用于工作演示；虽然它只处理了四个边缘中的一个。但是这是一个不错的开始。 :) - David Thomas

@david Thomas，这就是拖动自动调整大小的概念。同样的效果可以通过使用左侧位置和宽度在水平方向上实现。 - Hussein

当然，我赞同。我的评论只是想建议您可以再进一步帮助OP。至少，它并不是有意挑剔的 =) - David Thomas

@Hussein，非常感谢您的额外努力。还有以上评论的+1。 - David Thomas

这太完美了，而且是我寻找已久的解决方案，谢谢！ - ShayneStatzell

Answer 2

你可以使用带有jQuery可拖动功能的拖拽函数。 在拖拽函数中，您只需检查内部

元素的边缘是否超出容器

元素的边缘。

如果超出，则增加容器

的宽度或高度。

您可以使用jQuery UI中本地的position方法来检查两个

标签的顶部、底部、左侧和右侧的位置。

以下是有关这些方法如何工作的更详细信息的API链接。

1. Draggable->event->drag
2. Position

- Wirde