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

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

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

Я вижу аналогичную функцию здесь, в StackOverflow, когда задаю новый вопрос. Текстовое поле для ввода вопроса имеет div с именем «grippie», который изменяет размер текстового поля. Это именно та функциональность, которую я ищу, но с div вместо textarea.


javascript jquery draggable jquery-ui jquery-ui-draggable
person Richard    schedule 16.02.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Ну вот. Работает как горизонтально, так и вертикально. Посмотрите его в действии на 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);
        }
    }
});
person Hussein    schedule 16.02.2011
comment
+! для рабочей демонстрации; хотя он имеет дело только с одним из четырех ребер. Но хорошее начало. :) - person David says reinstate Monica; 17.02.2011
comment
@david Thomas, это концепция автоматического изменения размера перетаскивания. То же самое можно сделать по горизонтали, используя левую позицию и ширину. - person Hussein; 17.02.2011
comment
Ну да: очевидно. Вот почему я проголосовал. Комментарий был просто для того, чтобы предположить, что вы могли бы пройти немного дальше, чтобы помочь ОП. По крайней мере, это не было задумано как критика =) - person David says reinstate Monica; 17.02.2011
comment
@ Дэвид Томас, хорошо, я тебя понял. Ну вот. jsfiddle.net/evunh/1. Также обновил код выше. :-) - person Hussein; 17.02.2011
comment
@Richard Убедитесь, что вы принимаете ответ, если это решение работает для вас. - person Hussein; 17.02.2011
comment
@Hussein, большое спасибо за то, что сделали все возможное. И +1 к комментарию выше. - person David says reinstate Monica; 17.02.2011
comment
как решить, если родительский элемент div, размер которого должен быть изменен, имеет фиксированные размеры - jsfiddle.net/LakYy/6 ? Похожий вопрос, но решение без прокрутки, мне нужно получить прокрутку - person coding_idiot; 03.07.2014
comment
Это идеальное решение, которое я давно искал, спасибо! - person ShayneStatzell; 28.04.2015

arrow_upward
0
arrow_downward

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

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

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

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

  1. Перетаскиваемый->событие->перетаскивание
  2. Позиция
person Wirde    schedule 16.02.2011