通过拖动分隔符处理程序调整元素大小 [英] 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之上的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 :)

[BTW：有几个类似名称的问题链接到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屋！