时间戳

首页 > 解决方案 > Resizable Sidebar : 如何设置主区域的最大宽度

javascript - Resizable Sidebar : 如何设置主区域的最大宽度

问题描述

我有一个侧边栏可调整大小的布局。我已经使用 Javascript 做到了。但我希望它具有调整大小的最大值和最小值。我通过设置侧边栏的最大宽度和最小宽度来为侧边栏部分完成此操作。但问题是，即使侧边栏已使用最大宽度进行限制，主要区域也会减少（扩展时）。我一直根据光标指针的移动（使用 js ）将 margin-left 属性添加到主区域。但是没有允许我们设置最大或最小边距的属性。我怎样才能做到这一点。任何人都可以提出任何解决方法吗？

Js Fiddle - 整个代码 - https://jsfiddle.net/pdo4yjmg/

请尝试在小提琴结果中扩大到 400px 以上，您可以在那里看到问题（400px 是最大宽度）

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);
  }

标签： javascripthtmlcss

解决方案

由于您已成功将侧边栏限制为min-widthof200和max-widthof 400，我建议您对您的margin-left. 但是 CSS 中没有这样的属性可以限制边距，您需要求助于 JavaScript。也许在你设置margin-leftmainArea 的地方，确保你的新值在 200 到 400 之间：

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

另外，请参阅如何使用 JavaScript 来限制最小/最大值之间的数字？

推荐阅读