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

Question

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

http://jsfiddle.net/3zLRJ/

但我的实际目标是这样的

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

Answer 1

插件默认是不支持的，所以我做了一个开始，让你达到目的。我只是将 div 硬编码到 resize 事件 的函数中，让它动态化取决于您；)。

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

希望这对您有所帮助!