javascript - Javascript / jQuery 并行调整大小插件

Question

我正在寻找一个可以在相反方向同时调整两个平行 div 大小的插件。

<div class='one'></div>
<div class='handle'></div>
<div class='two'></div>

假设 div 彼此相邻浮动。

当用户向右拖动 .handle 时，它​​应该使 .two 更小，.one 更大。

我试过写一个基本的插件，但我不能解释所有的浏览器等。

如果有人感兴趣，我真正想做的是调整多个 CKEditor 实例的大小。.one 和 .two 将包含 CKEditor 的实例，并且 handle 需要并行调整它们的大小。

谢谢

Answer 1

您需要的是名为“jQuery UI resizable”的插件。

在示例页面上有一个您正在尝试做的示例：同步调整大小

Answer 2

在我的应用程序中，我有两个高度相同的 div 并排，所以我使用 jquery UI 使一个可调整大小，然后使用第一个 div 的大小信息来设置第二个 div 的位置。这是在调整大小回调函数中完成的。

<script>
$(function() {
    $( ".one" ).resizable({
        handles: "e",
        resize: function(event, ui) {
            $( ".two" ).css("left", $(this).width() );
        }
    });
});
</script>