Как я могу перетаскивать функцию jQuery, расширяя контейнер?

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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 продолжает расширяться по размеру.