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

Posted 2023-05-08

【中文标题】JqueryUI Draggable - 仅垂直自动调整父容器的大小

【英文标题】：JqueryUI Draggable - Auto resize parent container vertically only

【发布时间】：2013-08-02 05:42:45

【问题描述】：

我有一个名为“内容”的 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。

有什么想法吗？

【参考方案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);
    
,

【参考方案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"
);

【讨论】：

如果您不想更改父容器的宽度，只需删除第二个 if。

它有点工作jsfiddle.net/F4bxA/5 但是你必须不断释放内部div然后再次抓住它以扩大高度，有没有更平滑的方法？

【参考方案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/

【讨论】：

Patricia，它真的很接近我的需要，感谢您的帮助，但还原会将内部 div 放回起始位置，我想要它，这样 div 就不能拖过左上角和右上角父 div 的边缘。

我已经用 75% 的工作模型更新了 jsfiddle，但由于某种原因，当它被拖过内容 div jsfiddle.net/F4bxA/8 的右边缘时，内框变得“不可拖动”@有什么想法吗？跨度>

【参考方案4】：

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

JqueryUI Draggable - Auto resize parent container

【讨论】：

我已更新 OP 以包含此内容，但仍希望在 3 个方面进行遏制