我有一个外部div,称为content和一个输入按钮。

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

新的div是可拖动的。

如果拖动div,则内容div会完美增长,但是如果我一直单击“添加div”按钮,则内容不会增长以包括内部div的内容。

还如何才能使div向上移动,使内容缩小?

继承人jsfiddle http://jsfiddle.net/F4bxA/14/

匹配小提琴的代码

#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>

最佳答案

尝试这个

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

您只需要更新高度

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

10-01 17:42
查看更多