可调整大小的边栏:如何设置主区域的最大宽度

Question

我有一个可以调整侧边栏大小的布局。我使用Javascript完成了这项工作。但我希望它有一个调整大小的最大值和最小值。我已经为侧边栏部分设置了最大宽度和最小宽度。但问题是，即使侧边栏被限制为使用最大宽度，主区域也会减少(当扩展时(。我一直在根据光标指针的移动(使用js(向主区域添加margin-left属性。但没有任何属性允许我们设置剩余的最大或最小余量。我怎样才能做到这一点。有人能提出解决办法吗？

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

请尝试在fiddle结果中扩展到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);
}

Answer 1

由于您已经成功地将侧边栏约束为200的min-width和400的max-width，因此我建议您对margin-left也这样做但是CSS中没有这样的属性可以限制边距，您需要使用JavaScript。也许在你设置mainArea的margin-left的地方，确保你的新值在200到400:之间

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

另请参阅如何使用JavaScript将数字限制在最小值/最大值之间？

Answer 2

完全可调整大小：

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