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

Question

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

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

我已将可拖动 div 的包含设置为 parent('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);
    }
},

Answer 2

像这样放置你的javascript：

var i = $('#draggable');
var o = $('#content');
i.draggable({
   drag: function (event, ui) {
      if (i.position().top > o.height() - i.height()) {
           o.height(o.height() + 10);
       }
       if (i.position().left > o.width() - i.width()) {
           o.width(o.width() + 10);
       }
   },
   containment: "parent"
});

Answer 3

i.draggable({
 drag: function (event, ui) {
    if (i.position().top > o.height() - i.height()) {
        o.height(o.height() + 5);
        return true;
    }
    if(i.position().top <= 0){
        i.draggable( 'option',  'revert', true );
        return false;
    }else
    if(i.position().left <=0){
        i.draggable( 'option',  'revert', true );
        return false;
    }else
    if(i.position().left >=o.width() - i.width()){
        i.draggable( 'option',  'revert', true );
        return false;
    }else{
        i.draggable( 'option',  'revert', false );
    }
 }

});

这样我相信它就像你想要的那样:)

测试链接如下： http://jsfiddle.net/F4bxA/6/

Answer 4

我觉得这个问题和你的一样，已经有了答案:)

JqueryUI Draggable - Auto resize parent container