DIV使用垂直幻灯片动态调整大小

Question

这有点难以解释，但我会尽我所能：

我的网页使用两个div进行划分：一个浮动在左边，另一个浮在右边（每个浮动50％或更多）。

我想添加一项新功能：动态调整大小。也就是说：当我点击DIV＃1的右边界或点击DIV＃2的左边框时，每个人都应该从左到右或从右到左调整大小。

也许你不理解我，但这种效果是我所需要的（来自this plugin）：

此插件仅适用于图像，而不适用于div。我对我的div需要同样的效果。实际上，我正在尝试使用JQueryUI Resizable class，但我不知道如何同步两个调整大小。

你能帮帮我吗？任何关于此的建议或跟踪都将非常感激。谢谢！

Answer 1

我使用15行JS / jQ创建了这个功能：http://jsfiddle.net/xSJcz/

希望它有所帮助！您可以轻松修改它以响应点击或类似。

编辑：对于未来的记录，这里是答案的CSS：

#left,#right{
    border:1px solid #aaa;
    float:left;
    height:100px;
    width:48%;
}
#handle{
    background:#000;
    float:left;
    height:100px;
    margin:1px;
    width:1%;
}

HTML：

<div id="left">
    Left
</div>
<div id="handle"></div>
<div id="right">
    Right
</div>

JS：

var h = $('#handle'),
    l = $('#left'),
    r = $('#right'),
    w = $('body').width() - 18;

var isDragging = false;

h.mousedown(function(e){
    isDragging = true;
    e.preventDefault();
});
$(document).mouseup(function(){
    isDragging = false;
}).mousemove(function(e){
    if(isDragging){
        l.css('width', e.pageX);
        r.css('width', w - e.pageX);
    }
});