jQuery의 드래그 가능한 함수가 컨테이너를 확장하도록하려면 어떻게해야합니까?

Question

이 같은 마크 업이있는 경우 :

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

가 어떻게 컨테이너 사업부가 수직으로 확장 나는 draggables 중 하나를 드래그 (난 단지 #container는 아래로 확장 할 수 있어야 할) 수 있을까요? 드래그 콜백을 사용하는 방법에 대해 생각해 봤지만 CSS 방식이 필요합니다. 맞습니까?

Answer 1

나는 이것이 가능하지 않을 수도 있다는 결론에 도달했습니다. 대신 jQuery.resizable을 사용하여 대체 방법을 사용하여 수동으로 수행했습니다.

Answer 2

div # 컨테이너 요소가 draggables에서 트리거 된 클래스를 가져 오지 않았기 때문에 css로 수행 할 수 없습니다. 나는 약간의 진전을

$('.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의 크기를 조정하지만, #container 종료하는 데 사용되는 .draggable 사업부를 이동 중지 :
는 여기에 내가 지금은 부분적으로 작업 (위의 마크 업을 사용)이 방법은 다음과 같습니다. 나가면 놓은 다음 다시 드래그하면 .draggable이 #container가 끝나는 위치로 다시 이동하고 #container가 계속 확장되는 경우에도 멈 춥니 다.