jQuery UI : 컨테이너 div 크기 조정

Question

다음 예제에서는 컨테이너 div에 두 개의 드래그 가능한 div가 있습니다. 버튼을 클릭하여 두 번째 draggable div가 제거되면 첫 번째 div가 위로 이동하고 컨테이너의 크기가 조정됩니다 (see jsfiddle). 첫 번째 div는 두 번째 div가 제거 될 때 움직이지 않아야합니다. 그 위치는 절대적입니다. 이 코드의 문제점은 무엇입니까?

html로 :

<div id="container" style="background-color:blue;width:100%;height:100%"></div> 
<button onclick="removeDiv()">Remove</div> 

및 자바 스크립트 :

$(document).ready(function(){ 

    var $div0 = $('<div id="div0" />').appendTo('#container'); 
    $div0.draggable(); 
    $div0.offset({ top: 200, left: 350}); 
    $div0.css('background-color','white'); 
    $div0.css('width','150px'); 
    $div0.css('height','200px'); 
    $div0.text(0); 

    var $div1 = $('<div id="div1" />').appendTo('#container'); 
    $div1.draggable(); 
    $div1.offset({ top: 200, left: 50}); 
    $div1.css('background-color','white'); 
    $div1.css('width','150px'); 
    $div1.css('height','200px'); 
    $div1.text(1); 

}); 


function removeDiv() { 
    $('#div0').remove(); 
} 

Answer 1

모두 드래그 div의 상대 위치를 가지고있다. 당신과 같이 그들을 해결할 수 있습니다 : 그들은 지금 절대 위치이기 때문에

http://jsfiddle.net/isherwood/dzSRR/13/

#container { 
    position: relative; 
} 
#container > div { 
    position: absolute; 
} 

, 당신은 부모가 높이를 div에 부여해야합니다. 100%을 사용하는 경우 해당 높이를 html, body에 적용해야합니다.

http://jsfiddle.net/isherwood/dzSRR/14/