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

Question

我只是尝试使用jQuery ui

创建一个Drag可重新调整大小的布局

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

Fiddle example

希望这有帮助！

Answer 2

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

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

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