Как сделать так, чтобы перетаскиваемая функция jQuery расширяла контейнер?

Question

Если у меня есть такая разметка:

<!-- Other Content -->
<div id="container">
<div class="draggable">
</div>
<div class="draggable">
</div>
</div>
<!-- Other Content -->

Как сделать так, чтобы контейнер контейнера расширялся по вертикали (я только хочу, чтобы #container мог расширяться вниз), когда я перетаскиваю один из перетаскиваемых объектов? Я думал об использовании обратного вызова перетаскивания, но должен быть способ CSS, верно?

Answer 1

Вы не можете сделать это с помощью css, потому что элемент контейнера div # не получил ни одного класса, вызванного от draggables.

Лучший способ сделать это с обратным вызовом:

$('.draggable').draggable({
   start: function(event, ui) { $('#container').addClass('expand'); },
   stop: function(event, ui) { $('#container').removeClass('expand'); }
});

Answer 2

Я пришел к выводу, что это даже невозможно. Я использовал альтернативный метод использования jQuery.resizable, чтобы сделать это вручную.

Answer 3

Я добился определенного прогресса, но это все еще не работает так, как мне бы хотелось.
Вот как у меня теперь это частично работает (используя разметку выше):

 var dragCatch = function(event, ui) {
    var containerOffset = $('#container').offset().top;
    var containerBottom =  containerOffset + $('#container').height();
    var componentHeight = $(this).height();

    if (event.pageY > containerBottom - componentHeight - 2) {
        $('#container').height(event.pageY - containerOffset + componentHeight + 2);
        $(this).css('top', event.pageY - containerOffset);
    }
};

$(this).each(function() {
    $(this).draggable({
        grid: [117,1]
        ,snap: '.draggable'
        ,snapMode: 'outer'
        ,containment: '#container'
        ,drag: dragCatch
    })
});

Этот код успешно изменит размер #container div, но перестанет перемещать .draggable div, где #container использовался для завершения. Если я отпущу, затем снова перетащу, то .draggable снова переместится туда, где заканчивается #container, а затем остановится, даже если #container продолжит увеличиваться в размере.