JqueryUI Draggable - автоматическое изменение размера родительского контейнера

Question

У меня есть два div, один внутри другого. Внешний div (контейнер) имеет произвольные размеры. Внутренний div установлен в указанное измерение меньше, чем его контейнер.

Я применил jquery, перетаскиваемый к внутреннему элементу div, и я пытаюсь автоматически изменить размер родительского контейнера, когда перетаскиваю внутренний div за внешние края контейнера. Как я могу сделать это?

Я вижу похожую функцию здесь, в StackOverflow, когда задаю новый вопрос. У текстовой области для ввода вопроса есть div с именем 'grippie', который изменяет размер текстовой области. Это именно та функция, которую я ищу, но с 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

Вы можете использовать функцию drag , которая поставляется с jquery dragggable. В функции перетаскивания вы можете просто проверить, находятся ли края внутреннего блока за пределами границ контейнера.

Если это так, увеличьте ширину или высоту контейнера div.

Вы можете использовать метод позиции, который является родным в jquery ui, чтобы проверить позиции сверху, снизу, слева и справа от обоих тегов div.

Здесь приведены ссылки на API для получения более подробной информации о том, как работают эти методы.

1. Draggable -> событийно> сопротивление
2. Должность