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

Posted 2023-05-08

【中文标题】JqueryUI Draggable - 自动调整父容器的大小

【英文标题】：JqueryUI Draggable - Auto resize parent container

【发布时间】：2011-06-28 16:16:21

【问题描述】：

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

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

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

【参考方案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);
        
    
);

【讨论】：

+！用于工作演示；尽管它只处理 四个 边中的 一个。但是一个好的开始。 :)

@david Thomas，这就是拖动自动调整大小背后的概念。同样可以通过使用左侧位置和宽度来水平完成。

嗯，是的：很明显。这就是我投票的原因。该评论只是建议您可以走得更远，以帮助OP。至少，它不是有意作为批评=)

@david Thomas，好的，我知道了。干得好。 jsfiddle.net/evunh/1。还更新了上面的代码。 :-)

@Richard 如果此解决方案适合您，请确保您接受答案。

【参考方案2】：

你可以使用jquery自带的drag功能进行拖动。 在拖动功能中，您可以检查内部 div 的边缘是否在容器 div 的边缘之外。

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

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

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

Draggable->事件->拖动 Position