Question

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

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

一个重要的复杂因素：在动态构建之前，我不会知道除法器上方div的大小，所以我不能只从一个绝对定位开始。

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

[顺便说一句：有几个类似名称的问题与jsFiddle不起作用的例子有关（例如，this）。

到目前为止，我已经使用了这个：

    $('.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); 
    } 
});

这是fiddle。

使用clone是关键。可拖动元素（.rsh）是相对的，因此如果您不使用克隆，则元素移动两倍于鼠标，因为它也受前一个div高度变化的影响

注意：- 85只是页面布局的一个怪癖，允许标题等等。

Answer 2

这是Nick代码的一个版本（非常有用，谢谢！），允许后续的分隔符保持静态。它的工作原理是在相反方向上调整拖动分隔线上方和下方的div。

$('.rsh').draggable({
    axis: 'y'
    ,containment: 'parent'
    ,helper: 'clone'
    , start: function(event, ui) { 
        $(this).attr('start_offset',$(this).offset().top);
        $(this).attr('start_next_height',$(this).next().height());
    }
    ,drag: function (event, ui) {           
        var prev_element=$(this).prev();
        var next_element=$(this).next();
        var y_difference=$(this).attr('start_offset')-ui.offset.top;            
        prev_element.height(ui.offset.top-prev_element.offset().top);
        next_element.height(parseInt($(this).attr('start_next_height'))+y_difference);
    } 
});

Answer 3

这是Nick版本的另一种替代方案，它会自动将水平处理程序移动到顶部，并将其作为一个很好的效果归零。另外，它会相互调整两个部分的高度尺寸。

$('.horizontal_handler').draggable({

        axis: 'y', 
        containment: 'parent',
        helper: 'clone', 
        drag: function (event, ui) { 

            var height = ui.offset.top - 220 // 220 : initial top margin to the previousDiv
            , referenceHeight = nextDivHeight + previousDivHeight  //500 px initial height size
            , previousSection = $(this).prev()
            , nextSection = $(this).next();

            if ((nextSection.height() === 0) && (referenceHeight - height < 0)){
                return;
            }

            previousSection.height(height); 
            nextSection.height(referenceHeight - height ) ;


            if (nextSection.height()< 20){
                    previousSection.height( height+ nextSection.height() );
                    nextSection.height(0);
                }

            if (previousSection.height()< 20){
                    nextSection.height(referenceHeight - height - previousSection.height() );
                    previousSection.height(0); 
                }
        } 
    });

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

3 个答案: