Question

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

单击按钮上的

我动态创建了一个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>

Answer 1

试试这个

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

你只需要更新身高

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

Answer 2

 $('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');

    o.height(o.height() + 30);  //new code


      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
  });

  });

Answer 3

如果浮动容器和要追加的节点，当内容超出容器的高度时，它将展开。

另外，我已经通过javascript从javascript中提取你设置的样式并将它们放入css中。

CSS：

#content {
    display: block;
    position:relative;
    top:215px;
    width:600px;
    margin:auto;
    height:auto;
    border:1px solid red;
    padding:0px;
    min-height:300px;
    float:left;  /* floating the container */
}

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

/* moving js styles */
.draggable {
    float:left;
    clear: both;
    border: 1px solid #000;
    display: inline-block;
    width: 75px;
    left:20px;
    height: 75px;
}

JS：

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
    p = p + 75;
    i++;
    var newdiv = document.createElement('div');
    newdiv.setAttribute('class','draggable');
    newdiv.setAttribute('id', 'draggable' + i);
    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
    });

});

JS小提琴：http://jsfiddle.net/F4bxA/28/

Answer 4

只需添加一个函数来计算内部div的位置，然后调整内容高度。（也许我不知道有一种纯粹的CSS方式。）

var container = $("#content");
function setHeight() {
    var maxHeight = 0;
    $("div", container).each(function(i, v) {
        maxHeight = Math.max($(v).position().top + $(v).height(), maxHeight);
    });
    if (container.height() != maxHeight) {
        container.height(maxHeight);
    }
}

这是fiddle。

Answer 5

来自你的jsfiddle http://jsfiddle.net/F4bxA/14/

我建议您为div draggable的父级创建新的div并添加css float：left到div content和div draggable。两个div将自由定位而不是相互依赖。

<div id="content"></div>
<div id='subcontent'></div>

#content {
    float:left;
}

newdiv.style.float = 'left';
document.getElementById("subcontent").appendChild(newdiv);

我修改了一些代码，如

JS小提琴：http://jsfiddle.net/F4bxA/38/

在此代码中，当您将div draggable移动到评论顶部附近时，div内容将加上高度并移动顶部-1px（相同的顶部位置）。

div不会随着动态内容而增长

5 个答案: