Question

在以下示例中，容器div中有两个可拖动的div。当删除第二个可拖动div时（通过单击按钮），第一个div向上移动并调整容器大小（see jsfiddle）。当第二个div被移除时，第一个div不应移动，因为它的位置是绝对的。这段代码有什么问题？

HTML：

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

和javascript：

$(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/

jQuery UI：容器div调整大小

1 个答案: