如何使jQuery的可拖动函数扩展容器？

Question

如果我有这样的标记：

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

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

Answer 1

您无法使用CSS执行此操作，因为div＃container元素未从可拖动对象触发任何类。

最好的方法是使用回调：

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

Answer 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的大小，但将停止将.draggable div移动到#container以前结束的位置。 如果我放开，然后再次拖动，则.draggable会再次移动到#container结束的位置，然后即使#container大小继续扩大也将停止。

Answer 3

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