Боковая панель с изменяемым размером: как установить максимальную ширину основной области

Question

У меня есть макет, в котором размер боковой панели можно изменять. Я сделал это с помощью Javascript. Но я хочу, чтобы у него было максимальное и минимальное значение изменения размера. Я сделал это для боковой панели, установив максимальную ширину и минимальную ширину для боковой панели. Но проблема в том, что основная область уменьшается (при расширении), даже если боковая панель была ограничена максимальной шириной. Я добавил свойство margin-left в основную область в соответствии с перемещением указателя курсора (используя js). Но нет свойства, которое позволяет нам установить максимальное или минимальное левое поле. Как я могу этого добиться. Может ли кто-нибудь предложить какое-либо обходное решение?

Js Fiddle - весь код - https://jsfiddle.net/pdo4yjmg/

Пожалуйста, попробуйте расширить более 400 пикселей в результате скрипки, вы можете увидеть проблему там (400 пикселей - максимальная ширина)

Js часть -

var element = document.getElementById('resizable');
  if (element) {
    var resizer = document.createElement('div');
    resizer.className = 'draghandle';
    resizer.style.width = '6px';
    resizer.style.height = '100vh';
    element.appendChild(resizer);
    resizer.addEventListener('mousedown', initResize, false);
  }

  function initResize(e) {
    window.addEventListener('mousemove', Resize, false);
    window.addEventListener('mouseup', stopResize, false);
    document.getElementById("mainArea").classList.add('marginLeft')
  }

  function Resize(e) {
    element.style.width = (e.clientX - element.offsetLeft) + 'px';
    document.getElementById("mainArea").style.marginLeft = (e.clientX - element.offsetLeft) + 'px';
  }

  function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
  }

Answer 1

Полное изменение размера:

  function Resize(e) {
    element.style.width = (e.clientX - element.offsetLeft) + 'px';
    if(parseInt(element.style.width) <- 200)
        lement.style.width = '200px'
    document.getElementById("mainArea").style.marginLeft = (e.clientX - element.offsetLeft) + 'px';
  }

Answer 2

Поскольку вы успешно ограничили боковую панель до min-width из 200 и max-width из 400, я бы посоветовал вам сделать то же самое с вашим margin-left. Но в CSS нет такого свойства, которое позволяет ограничивать маржу , , вам нужно будет прибегнуть к JavaScript. Возможно, если вы устанавливаете margin-left для mainArea, убедитесь, что ваше новое значение находится между 200 и 400:

document.getElementById("mainArea").style.marginLeft = Math.min(Math.max(parseInt((e.clientX - element.offsetLeft)), 200), 400) + 'px';

Также см. Как я могу использовать JavaScript, чтобы ограничить число между мин. / максимальное значение?