Javascript 可调页面分割边界

我的HTML页面中有两列

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

---

我希望左右两半之间的边界可以由用户调整。也就是说，用户可以在浏览页面时向左或向右移动边界。有可能吗？

分区中没有任何内容，因此不会发生任何事情。就像在写：

<h1></h1>

---

更改h1的CSS，并期望有东西出现

是的，但它需要JavaScript。要应用它，您当然可以设置每个边的

宽度

：

var leftPercent = 50;
function updateDivision() {
    document.getElementById('left').style.width = leftPercent + '%';
    document.getElementById('right').style.width = (100 - leftPercent) + '%';
}

现在你可以调整除法，比如说

leftPercent=50；updateDivision（）

，但用户不会这样做。您可以通过多种不同的方式向用户演示。也许最合适的方法是在他们能拖曳的中间有一条小线。为此，您可以使用一些CSS进行定位：

#content {
    position: relative;
}
#divider {
    position: absolute;
    /* left to be set by JavaScript */
    width: 1px;
    top: 0;
    bottom: 0;
    background: black;
    cursor: col-resize;
    /* feel free to customize this, of course */
}

然后确保在

内容
中有一个
division
的
id
为
divider
的
division
，并更新
updatedVision
以同时更新
divider的
左侧
：

document.getElementById('left').style.left = leftPercent + '%';

然后，您只需要一点逻辑来处理拖动。（在这里，我将所有元素放入适当命名的变量中）：

你应该能够阅读它，看看它是如何工作的，但简而言之：当有人按下分隔符时，它会监听。当他们移动鼠标时，它会将侦听器附加到页面。当他们这样做时，它会更新变量并调用
updateDivision
来更新样式。当它最终得到一个
mouseup
时，它停止在页面上监听

作为进一步的改进，您可以使每个元素在拖动时都具有适当的
光标
样式，以便在拖动时光标不会闪烁

您描述的是通常称为“拆分窗格”的内容。我讨厌所有的“框架工作”。。。但是有一些框架为您提供了这一点。。。ExtJS、jQuery、dojo
document.getElementById('left').style.left = leftPercent + '%';

divider.addEventListener('mousedown', function(e) {
    e.preventDefault();
    var lastX = e.pageX;
    document.documentElement.addEventListener('mousemove', moveHandler, true);
    document.documentElement.addEventListener('mouseup', upHandler, true);
    function moveHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        var deltaX = e.pageX - lastX;
        lastX = e.pageX;
        leftPercent += deltaX / parseFloat(document.defaultView.getComputedStyle(content).width) * 100;
        updateDivision();
    }
    function upHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        document.documentElement.removeEventListener('mousemove', moveHandler, true);
        document.documentElement.removeEventListener('mouseup', upHandler, true);
    }
}, false);