如何让jQuery的可拖动功能扩展容器?

时间:2009-10-27 20:23:46

标签: javascript jquery css jquery-ui

如果我有这样的标记:

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

我如何将容器div垂直展开(我只希望#container能够向下扩展),因为我拖动其中一个拖动器?我已经考虑过使用拖动回调,但是必须有CSS方式,对吧?

3 个答案:

答案 0 :(得分:1)

你不能用css来做,因为div#container元素没有得到任何从draggables触发的类。

最好的方法是使用回调:

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

答案 1 :(得分:0)

我取得了一些进展,但这仍然没有按照我希望的方式发挥作用 这是我现在如何部分工作(使用上面的标记):

 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的大小,但会停止移动.conraginer用于结束的.draggable div。如果我放手,然后再次拖动,那么.draggable将再次移动到#container结束的位置,然后即使#container继续扩大尺寸也会停止。

答案 2 :(得分:0)

我得出的结论是,这甚至可能无法实现。我选择了另一种使用jQuery.resizable的方法来手动完成。