Изменение размера пользовательского интерфейса jQuery при сохранении общей ширины - PullRequest
Новая
       11

Изменение размера пользовательского интерфейса jQuery при сохранении общей ширины

0 голосов
/ 06 июня 2018

У меня есть два контейнера, расположенных горизонтально через position: absolute.Я пытаюсь создать «полосу изменения размера» посередине так, чтобы при ее перетаскивании размер одного элемента увеличивался, а другой уменьшался (следовательно, общая ширина была неизменной). 

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

enter image description here

Затем я инициализирую их следующим образом: 

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

Я бы хотел, чтобы дескриптор E левого контейнера и W-дескриптор правого контейнера "следовали" за полосой изменения размера, когдаЯ тащу это.Есть ли в jQuery UI встроенный механизм для этого?Если нет, как лучше?

1 Ответ

0 голосов
/ 06 июня 2018

Вначале я хотел бы рассмотреть некоторые 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>
...