jQuery UI 调整大小，同时保持相同的整体宽度

Question

我有两个容器通过 position: absolute 水平放置。我试图在中间制作一个“调整大小栏”，这样拖动它会增加一个元素的大小，同时减小另一个元素的大小(因此保持整体宽度相同)。

<div class="container left"></div>
<div id="resizeBar"></div>
<div class="container right"></div>  

然后我像这样初始化它们:

function initUI () {
    $('.container').resizable({handles: 'e,w'});
    $('#resizeBar').draggable({axis: 'x'});
}

我希望在拖动调整大小栏时，左侧容器的 E handle 和右侧容器的 W handle “跟随”调整大小栏。 jQuery UI 是否有内置机制来执行此操作？如果没有，最好的方法是什么？

Answer 1

我会首先考虑使用一些 CSS 来简化思考，您只需调整一个元素的 width，另一个元素就会随之调整:

这里是考虑 mousemove 事件的简化示例:

$('#resizeBar,.container').on('mousemove',function(e) {
  $('.left').width(e.pageX - 20);
})

body {
  display:flex;
  height:200px;
  color:#fff;
}
body > .container.right {
  background:#000;
  flex:1;
}
body > .container.left {
  background:#000;
  width:50%;
} 
#resizeBar {
  width:10px;
  background:red;
  margin:0 5px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container left">left</div>
<div id="resizeBar"></div>
<div class="container right">right</div>