jQuery UI调整大小，同时保持相同的整体宽度 [英] jQuery UI resize while keeping same overall width

问题描述

我有两个容器通过位置水平布局：绝对。我试图在中间制作一个调整大小条，这样拖动它会增加一个元素的大小，同时减少另一个元素（从而保持整体宽度相同）。

 < 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是否有内置机制来执行此操作？如果没有，最好的方法是什么？

解决方案

我首先会考虑一些CSS，让你更容易思考，只需要调整<$ c

这是一个考虑 mousemove 事件：

  $（ '#resizeBar，.container'）。on（'mousemove'，function（e）{$（'。left'）。width（e.pageX  -  20）;}） 

  body {display：flex;高度：200像素;颜色：#fff;} body> .container.right {背景：＃000; flex：1;} body> .container.left {background：＃000;宽度：50％;} #resizeBar {width：10px;背景：红色;保证金：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>  

I have two containers laid out horizontally via position: absolute. I'm trying to make a "resize bar" in the middle such that dragging it will increase one element's size while decreasing the other (hence keeping the overall width the same).

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

Then I initialize them like this:

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

I'd like the left container's E handle and the right container's W handle to "follow" the resize bar when I drag it. Does jQuery UI have a built-in mechanism to do this? If not, what's the best way?

解决方案

I would first consider some CSS to make think easier where you will only need to adjust the width of one element and the other one will follow:

Here is a simplified example considering the 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>

这篇关于jQuery UI调整大小，同时保持相同的整体宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！