jQuery UI 在保持总宽度不变的情况下调整大小

Question

我通过 position: absolute 水平放置了两个容器。我试图在中间制作一个 "resize bar"，这样拖动它会增加一个元素的大小，同时减小另一个元素的大小（因此保持整体宽度相同）。

<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 手柄在我拖动时 "follow" 调整大小栏。 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>

jQuery UI 在保持总宽度不变的情况下调整大小

jQuery UI resize while keeping same overall width

html

css

jquery

resize

jquery-ui