我有两个水平放置的容器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 手柄和右侧容器的手柄在拖动时“跟随”调整大小栏。 jQuery UI 是否有内置机制来执行此操作？如果没有，最好的方法是什么？
我首先会考虑一些CSS，让思考变得更容易，你只需要调整width一个元素和另一个元素的关系如下：
这是一个简化的例子，考虑到mousemove event:
$('#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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
