通过拖动分隔符处理程序来调整元素大小

Question

我希望能够上下拖动分隔线以在固定页面高度上调整分隔线上方和下方的div.这些div可能在一张表中,尽管它们不一定是.

简而言之,我希望能够模仿jsFiddle网站上发生的事情,尽管我只需要垂直调整大小.jsFiddle使用过mooTools,但我想用jQuery来做.

一个重要的复杂因素:在动态构建之前,我不会知道除法器上方div的大小,所以我不能只是设置绝对定位.

前进的最佳方式是什么？我有一种感觉,如果我不问,我只会重新发明轮子:)

[顺便说一句:有几个类似名称的问题与不起作用的jsFiddle示例有关(例如,这个).

到目前为止我用过这个:

    $('.rsh').draggable({
        axis:'y',
        drag: function (event, ui) {            
            var offsettop = ui.offset.top;
            $(this).prev().css({
                height: offsettop
            });
    });

不用说,它还没有正常工作.

Answer 1

如果有人对未来感兴趣,我可以很好地解决这个问题:

$('.rsh').draggable({
    axis: 'y', 
    containment: 'parent',
    helper: 'clone', 
    drag: function (event, ui) { 
        var height = ui.offset.top - 85; 
        $(this).prev().height(height); 
    } 
});

这是小提琴.

使用clone是关键.可拖动的元素(.rsh)是相对的,因此如果你不使用克隆,元素会移动两倍于鼠标,因为它也会受到前一个高度变化的影响div.

注意:这- 85只是页面布局的一个怪癖,允许标题等等.