javascript - JqueryUI Draggable - 仅垂直自动调整父容器的大小

Question

我有一个名为“content”的 div，其高度设置为自动。

我已使用 javascript 将可拖动的子 div 附加到“内容”。

我已将可拖动 div 的包含设置为父级('content')。

如果向下拖动可拖动的 div，我怎样才能使外部 div('content') 的高度扩展。

我知道它需要破解，因为容器阻止我将内部 div 拖到低于外部 div 底部的位置。

'content' div 下面会有另一个 div，该 div 将相对于它定位，并且当 'content' div 垂直扩展时也会移动，所以我必须在 'content' div 之前有一个预定的高度我开始

非常感谢任何帮助

我已经设置了它的 jsfiddle http://jsfiddle.net/F4bxA/3/

要匹配的代码

CSS

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

js

var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'draggable');
newdiv.style.position = "absolute";
newdiv.style.top = "10px";
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);

$("#draggable").draggable({
     containment: "parent"   
});

html

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

编辑

我已经更新了 jsfiddle 以包含下面给出的答案 http://jsfiddle.net/F4bxA/4/

现在我需要在顶部、左侧和右侧的三个侧面包含内部 div。

有什么想法吗？

Answer 1

在@patricia 的大力帮助下，我设法解决了这个问题:-)

这是一个工作模型的 js fiddle http://jsfiddle.net/F4bxA/10/

和代码

var g = $('#draggable');
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;
    }
    if (g.position().top <= 0) {
        $(this).css('position', 'absolute');
        $(this).css('top', '1px');
        return false;

    } else if (g.position().left <= 0) {
        $(this).css('position', 'absolute');
        $(this).css('left', '1px');
        return false;
    } else if (g.position().left >= o.width() - g.width()) {
        var leftedge = (o.width() - g.width())-1;
        $(this).css('position', 'absolute');
        $(this).css('left', leftedge + 'px');
        return false;
    } else {
        g.draggable('option', 'revert', false);
    }
},