Question

我想允许用户同时设置两个div的高度。

这是我尝试做的草图：

两个div的高度必须始终是静态的 - 即：

top=100, bottom=300
top=50, bottom=350

用户可以拖动名为“middle”的div来调整大小......

可以使用jQuery UI Resizable类，还是应该寻找其他解决方案？

Answer 1

我不是100％清楚你想要实现的目标，而是形成我可以收集到的东西，你需要以下内容：

我已经从HTML中移除了ID，因为这些需要是唯一的，因此无论如何都被错误地使用了。然后，我在顶部和底部元素中添加了两个单独的类，并在中间添加了一个可调整大小的控件类。

// Make the middle element resizeable.
var resizableControl = $('.resizable-control').resizable();

// On resize of the middle element...
resizableControl.on('resize', function () {

    // Get the height and width
    var height = $(this).height();
    var width = $(this).width();

    // Resize the top and bottom elements to the middle 
    // element's height + their original height.
    $('.resizable').css({
        'height': height + 100,
        'width': width
    })
});

请参阅：https://jsfiddle.net/mark_c/23rdtjwq/3/

jQuery - 如何同时调整两个div的大小？

1 个答案: