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

【问题标题】：Resize elements by dragging divider handler通过拖动分隔处理程序调整元素大小
【发布时间】：2012-06-16 06:40:05
【问题描述】：

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

不用说，它还不能正常工作。

【问题讨论】：

如果插件可以，你可以试试这个：jqueryui.com/demos/resizable
是的，我看过这个，@Playmaker，虽然我不确定如何让它工作。 Draggable 似乎是一个更好的选择。
Draggable 用于拖放，如果我是对的，您想要调整大小。
要调整大小，你只需要添加这个脚本，' $(function() {$( ".classname" ).resizable();}); '这将使所有具有类 'classname' 的元素可调整大小
是的，您可以轻松地调整元素的大小。然而，问题是如何让处理程序（这是一个不同的 div）来驱动其他元素的大小调整。您会注意到，在 jsFiddle 站点上，您拖动的 DOM 元素不是正在调整大小的元素。

标签： jquery event-handling resize drag

【解决方案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 只是页面布局的一个怪癖，允许标题等。

【讨论】：

【解决方案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);
    } 
});

【讨论】：

【解决方案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); 
                }
        } 
    });

【讨论】：