2

我希望能够上下拖动分隔线以在固定页面高度上调整分隔线上方和下方的 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
            });
    });

不用说，它还没有正常工作。

4

3 回答 3

6

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

$('.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只是页面布局的一个怪癖，允许标题等。

于 2012-06-16T09:41:51.157 回答
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);
    } 
});
于 2012-08-31T13:34:33.340 回答
1

这是 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); 
                }
        } 
    });
于 2013-12-19T14:06:27.720 回答