javascript - div 不随动态内容增长

Question

我有一个名为内容的外部 div 和一个输入按钮。

在按钮上单击我动态创建了一个 div 并将其附加到内容 div。

新的 div 是可拖动的。

如果我拖动 div，内容 div 会完美增长，但如果我一直点击“添加 div”按钮，内容不会增长以包含内部 div。

另外，如果我向上移动 div，我怎样才能使内容缩小？

这是一个 jsfiddle http://jsfiddle.net/F4bxA/14/

匹配 fiddle 的代码

#content {
display: block;
position:relative;
top:215px;
width:600px;
margin:auto;
height:auto;
border:1px solid red;
padding:0px;
min-height:300px;
}

#button {
position:absolute;
top:10px;
left:25px;
}

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
p = p + 75;
i++;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'draggable' + i);
newdiv.style.position = "absolute";
newdiv.style.top = +p + "px";
newdiv.style.left = "20px";
newdiv.style.border = '1px solid #000';
newdiv.style.display = 'inline-block';
newdiv.style.width = '75px';
newdiv.style.height = '75px';
newdiv.innerHTML = "draggable inner div";
document.getElementById("content").appendChild(newdiv);

var g = $('#draggable' + i);
var o = $('#content');
g.draggable({
    constraint: "#content",
    drag: function (event, ui) {
        if (g.position().top > o.height() - g.height()) {
            o.height(o.height() + 5);
            return true;
        }           
    },

    scroll: false
});

});

 <div id="content"></div>
 <form>
     <input type='button' name='button' id='button' value='add a div'>
  </form>

Answer 1

试试这个

http://jsfiddle.net/F4bxA/32/

你只需要更新高度

$("#content").height(o.height()+g.height());