通过拖动分隔处理程序调整元素大小 [英] Resize elements by dragging divider handler

问题描述

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

I want to be able to drag a divider up and down to resize the divs above and below the divider on a fixed page height. These divs could be in a table, although they need not be.

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

In short, I would like to be able to emulate what happens on the jsFiddle site, although I only need the vertical resize. jsFiddle have used mooTools, but I want to do it with jQuery.

一个重要的复杂因素:直到实际动态构建分隔线上方的 div 时，我才知道它的大小，所以我不能从设置绝对定位开始.

One important complication: I won't know the size of the div above the divider until it is actually built dynamically, so I can't just start with a set absolute positioning.

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

What is the best way forward? I have a feeling I'll just be reinventing the wheel if I don't ask :)

[顺便说一句:一些名称相似的问题与不起作用的 jsFiddle 示例相关联(例如，这个).

[BTW: a couple of questions with similar names are linked to jsFiddle examples that don't work (for example, this).

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

So far I have used this:

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

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

Needless to say, it ain't workin' right yet.

推荐答案

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

In case anyone is interested in the future, I got it to work nicely with this:

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

The use of clone is the key. The draggable elements (.rsh) are relative, so if you don't use a clone the element moves twice as far as the mouse because it is also affected by the change in the height of the previous div.

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

Note: The - 85 is just a quirk of the page layout making allowance for the header and so forth.

这篇关于通过拖动分隔处理程序调整元素大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！