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

I have a div called 'content' that has a height set as auto.

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

I have appended a draggable child div using javascript to 'content'.

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

I have set the containment of the draggable div as the parent('content').

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

How can I make it so the outer div('content') will expand in height if I drag the draggable div down.

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

I know it needs a hack as the containment is stopping me dragging the inner div lower than the bottom of the outer div.

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

the 'content' div will have another div below it that will be positioned relative to it and will also move when the 'content' div is expanded vertically, so I have to have a predetermined height of the 'content' div before I start

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

any help greatly appreciated

任何帮助非常感谢

I have set up a jsfiddle of it http://jsfiddle.net/F4bxA/3/

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

code to match

要匹配的代码

css

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

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>

EDIT

I have updated the jsfiddle to include the answer given below http://jsfiddle.net/F4bxA/4/

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

now I need to contain the inner div on three sides, top, left and right.

现在我需要在三面,顶部,左边和右边包含内部div。

any ideas?

4 个解决方案

#1

with a lot of help from @patricia I have managed to solve this one :-)

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

heres a js fiddle of a working model http://jsfiddle.net/F4bxA/10/

继承人工作模式的小提琴http://jsfiddle.net/F4bxA/10/

and the code

和代码

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);
    }
},

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

4 个解决方案

#1

更多相关文章

随机推荐