如何让 jQuery 的可拖动功能扩展容器？答案

【问题标题】：How can I make jQuery's draggable function expand the container?如何让 jQuery 的可拖动功能扩展容器？
【发布时间】：2009-10-27 20:23:46
【问题描述】：

如果我有这样的标记：

<!-- Other Content -->
<div id="container">
<div class="draggable">
</div>
<div class="draggable">
</div>
</div>
<!-- Other Content -->

当我拖动其中一个可拖动对象时，如何让容器 div 垂直扩展（我只希望#container 能够向下扩展）？我考虑过使用拖动回调，但必须有一个 CSS 方式，对吧？

【问题讨论】：

单纯清除内容不行？ #container{overflow:auto}

标签： javascript jquery css jquery-ui

【解决方案1】：

你不能用 css 来做，因为 div#container 元素没有得到任何从可拖动对象触发的类。

最好的方法是使用回调：

$('.draggable').draggable({
   start: function(event, ui) { $('#container').addClass('expand'); },
   stop: function(event, ui) { $('#container').removeClass('expand'); }
});

【讨论】：

好的，那么在 expand 类中是什么让它扩展？

【解决方案2】：

我已经取得了一些进展，但这仍然没有按照我希望的方式工作。
这是我现在部分工作的方式（使用上面的标记）：

 var dragCatch = function(event, ui) {
    var containerOffset = $('#container').offset().top;
    var containerBottom =  containerOffset + $('#container').height();
    var componentHeight = $(this).height();

    if (event.pageY > containerBottom - componentHeight - 2) {
        $('#container').height(event.pageY - containerOffset + componentHeight + 2);
        $(this).css('top', event.pageY - containerOffset);
    }
};

$(this).each(function() {
    $(this).draggable({
        grid: [117,1]
        ,snap: '.draggable'
        ,snapMode: 'outer'
        ,containment: '#container'
        ,drag: dragCatch
    })
});

此代码将成功调整#container div 的大小，但将停止移动#container 曾经结束的.draggable div。如果我放手，然后再次拖动，那么 .draggable 将再次移动到 #container 结束的位置，然后即使 #container 继续扩大大小也会停止。

【讨论】：

如果这样您可以向容器 div 添加调整大小条，则只需使用 resizable() 而不是 draggable() 。或者，对于您的示例，如果您的盒子越来越大，那么您将永远无法取出每个容器。
是的，我可以使用调整大小栏，但我更希望页面能够通过一个操作而不是两个操作来扩展。关于删除包含选项，我意识到我最初的帖子并不是那么清楚，因为我希望容器 div 仅在垂直方向上展开。（我现在已经修好了）

【解决方案3】：

我得出的结论是，这甚至是不可能的。我采用了另一种使用 jQuery.resizable 的替代方法来手动进行。

【讨论】：