javascript - 使用可拖动事件增加 div 的宽度，并排显示

Question

到目前为止，我有两个固定长度的 div，它们通过在其中动态嵌入 iframe 来加载外部 URL。 Div 彼此相邻出现 - 一个在左边，另一个在右边。

截至目前，我已将它们的宽度分别固定为 50%。但是，我想让用户灵活地增加任何 div 的宽度，以便在 无需水平滚动 的情况下轻松查看 URL。就像根据他的需要向左或向右拖动分隔两个 div 的边框。

有什么办法可以实现吗？请建议任何图书馆或其他东西。

我浏览了一个图书馆twentytwenty用于图像。我不知道这对动态 iframe 有何影响。

这是 JSFiddle显示 div。

<div>
    <div id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div id="diffReport" style="width:45%; height: 730px;float:right">
        <p>another div</p>
    </div>
</div>

Answer 1

有一个很棒的 jQuery 插件，在这里使用 jQuery Splitter:

http://jquery.jcubic.pl/splitter.php