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

问题描述

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

I have two divs, one within the other. The outer div (the container) is of arbitrary dimensions. The inner div is set to a specified dimension smaller than its container.

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

I have applied jquery draggable to the inner div and I'm looking to automatically resize its parent container when I drag the inner div past the outer edges of the container. How can I go about doing this?

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

I see a similar feature here on StackOverflow when asking a new question. The textarea for typing in a question has a div named 'grippie' which resizes the textarea. This is exactly the functionality I'm looking for, but with a div instead of a textarea.

推荐答案

你走了。水平和垂直工作。请参阅

Here you go. Works both horizontally and vertically. See it in action athttp://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);
        }
    }
});

这篇关于JqueryUI Draggable - 自动调整父容器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！