DIV动态调整使用上下滑动

Question

这是一个有点难以解释，但我会尽我所能：一个浮在左边，右边其他浮动（：

我的网页上使用两个div分50％或多或少）。

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

也许你不理解我，但这种影响是什么，我需要（从this plugin）：

这个插件仅适用于图像，而不是申报单。我需要对我的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); 
    } 
});