jquery - 拖动可调整大小的 2 列布局

Question

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

http://jsfiddle.net/3zLRJ/

但我的实际目标是这样的

是否可以使用 jQuery Ui 方法或任何其他可用插件来实现？

Answer 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));
}​ 

小提琴示例

希望这可以帮助！

Answer 2

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

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

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