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

Question

我有两个容器通过position: absolute水平布置。我试图制作一个＆＃34;调整大小的条形图＆＃34;在中间，拖动它会增加一个元素的大小，同时减少另一个元素的大小（从而保持整体宽度相同）。

<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手柄＆＃34;跟随＆＃34;我拖动时调整大小栏。 jQuery UI是否有内置机制来执行此操作？如果没有，最好的方法是什么？

Answer 1

我首先会考虑使用一些CSS来让思考变得更容易，只需要调整一个元素的width，另一个元素将会跟随：

以下是考虑mousemove事件的简化示例：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;