Question

我有一个名为'content'的div，其高度设置为auto。

我使用javascript将'可拖动的子div添加到'内容'。

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

如果我拖动可拖动的div，我怎样才能使外部div（'content'）的高度扩大。

我知道它需要一个黑客，因为收容阻止我拖动内部div低于外部div的底部。

'content'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的帮助下，我设法解决了这个问题： - ）

这是一个工作模式的小提琴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

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

4 个答案: