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 に答える