3

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

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

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

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

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

“内容” div 将在其下方有另一个 div，该 div 将相对于它定位，并且当“内容” div 垂直扩展时也会移动，因此在我开始之前我必须有一个“内容” 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。

有任何想法吗？

4

4 回答 4

3

在@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);
    }
},
于 2013-08-01T15:02:20.433 回答
1

像这样放置您的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"
});
于 2013-08-01T11:03:52.743 回答
1 
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/

于 2013-08-01T11:59:16.120 回答
0

我认为这个问题与您的问题相同，并且已经有了答案:)

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

于 2013-08-01T10:46:55.970 回答