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

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

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

一个重要的复杂因素：我不知道divider上方div的大小,直到它实际上是动态构建的,所以我不能只从一个设置的绝对定位开始.

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

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

到目前为止我用过这个：

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

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

解决方法

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

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

这是fiddle.

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

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