1

我有一个名为 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>
4

5 回答 5

1

尝试这个

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

你只需要更新高度

$("#content").height(o.height()+g.height());
于 2013-08-05T13:36:15.687 回答
0

只需添加一个函数来计算内部 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);
    }
}

这是小提琴。

于 2013-08-05T14:09:47.130 回答
0 
 $('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
  });

  });
于 2013-08-05T13:09:34.750 回答
0

如果浮动容器和要附加的节点，由于内容超过容器的高度，它将扩展。

另外，我已经将您通过 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/

于 2013-08-05T13:29:28.467 回答
0

从你的 jsfiddle http://jsfiddle.net/F4bxA/14/

我建议您为 div 可拖动的父级创建新的 div，并将 css float:left 添加到 div 内容和 div 可拖动。两个 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 移动到靠近评论顶部时，div 内容将加上高度并移动顶部 -1px（相同的顶部位置）。

于 2013-08-05T14:41:39.710 回答