拖动可调整大小的 2 列布局答案

【问题标题】：Drag Re-sizable 2 column layout拖动可调整大小的 2 列布局
【发布时间】：2012-07-12 04:36:02
【问题描述】：

我只是尝试使用 jQuery ui 创建一个拖动可调整大小的布局

http://jsfiddle.net/3zLRJ/

但我的实际目标是这样的

是否可以使用 jQuery Ui 方法或任何其他可用的插件来制作它

【问题讨论】：

+1 简洁地解释问题。
在您的图像中，您的意思是通过可拖动来调整大小？对

标签： jquery css jquery-ui

【解决方案1】：

该插件默认不支持，所以我为您实现了目标。我只是将 div 硬编码到 resize event 的函数中，让它动态化由你决定；）。

var total_width = 500;

$("#div1").resizable({
    grid: [1, 10000]
}).bind( "resize", resize_other);


function resize_other(event, ui) {
    var width = $("#div1").width();

    if(width > total_width) {
        width = total_width;

        $('#div1').css('width', width);
    }

    $('#div2').css('width', (total_width - width));
}

Fiddle example

希望这会有所帮助！

【讨论】：

【解决方案2】：

设置div的handles属性：http://jsfiddle.net/3zLRJ/5/

但是，当调整一个 div 的大小时，您需要添加代码来调整两个 div，不过，通过 resize 事件。

另一种选择是在两者之间创建第三个 div，将其设为draggable，并将其运动限制为仅左右移动。然后，在 drag 事件上调整它周围的 div。

【讨论】：