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 句柄和右容器的 W 句柄在拖动时“跟随”调整大小栏。 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>