Question

HTML5当前规范删除了<frameset>标记。

<frameset>有一个很好的功能，没有它就不容易重现：

在框架集中，您可以使用鼠标更改分隔框架的线条的位置。

我如何在JavaScript中使用DIV提供相同的功能？

我遇到了the following，它展示了我正在寻找的行为。但是我想避免使用JQuery，即使使用jQuery应该是首选方式。

Answer 1

在看了你的例子后，我可以说没有jQuery这实际上很容易。

所有功能都只是简单的innerHTML和style操作以及事件订阅。

在没有jQuery的情况下直接重写该代码将是：

var i = 0;

document.getElementById("dragbar").onmousedown = function (e) {

    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.onmousemove = function (e) {
        document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
        document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
        document.getElementById("main").style.left = e.pageX + 2 + "px";
    };

    console.log("leaving mouseDown");
};

window.onmouseup = function (e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.onmousemove = null;
};

所以这里与pure JS同样小提琴。

编辑：正如@BenjaminGruenbaum指出的那样，覆盖DOM元素上的on*属性与指定新的事件处理程序不同。

在DOM元素上覆盖onmouseup，onload，onclick等属性是“旧”方式，因此即使在JS的石器时代也支持它。我上面的代码是这样编写的。

现在添加和删除事件处理程序的标准方法是addEventListener和removeEventListener。旧IE中不支持它们（但这可以是worked around）。

它允许你为同一个事件附加无限数量的听众，他们不会互相干扰。

因此可以通过以下方式实现相同的功能：

var i = 0;

function dragBarMouseDown(e) {
    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.addEventListener("mousemove", windowMouseMove, false);
    console.log("leaving mouseDown");
}

function windowMouseMove(e) {
    document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
    document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
    document.getElementById("main").style.left = e.pageX + 2 + "px";
}

function windowMouseUp(e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.removeEventListener("mousemove", windowMouseMove, false);
}

document.getElementById("dragbar").addEventListener("mousedown", dragBarMouseDown, false);

window.addEventListener("mouseup", windowMouseUp, false);

Fiddle

请注意，在这种情况下，我的函数不是匿名的，因此如果您尚未处于函数范围内，那么范围的self executing function在这里是有意义的。

Answer 2

这是@SoonDead水平版的纯粹而简单的答案，底部架子和水平分隔器。

结果应如下所示：

enter image description here

fiddle here

var i = 0;

function dragBarMouseDown(e) {
    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.addEventListener("mousemove", windowMouseMove, false);
    console.log("leaving mouseDown");
}

function windowMouseMove(e) {
        document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
        //document.getElementById("main").style.height = e.pageY + 2 + "px";
        document.getElementById("dragbar").style.top = e.pageY + 2 + "px";
        document.getElementById("bottomshelf").style.top = e.pageY + 17 + "px";
}

function windowMouseUp(e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.removeEventListener("mousemove", windowMouseMove, false);
}

document.getElementById("dragbar").addEventListener("mousedown", dragBarMouseDown, false);

window.addEventListener("mouseup", windowMouseUp, false);

body, html {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
#header {
    background-color: wheat;
    width:100%;
    height: 50px;
}
#main {
    background-color: BurlyWood;
    float: top;
    position: absolute;
    top:50px;
    width:100%;
    bottom: 38px;
    overflow-y: hidden;
}
#dragbar {
    background-color:grey;
    width:100%;
    float: top;
    top:120px;
    bottom:0px;
    height: 15px;
    cursor: row-resize;
    position:absolute;
}
#bottomshelf {
    background-color: IndianRed;
    width:100%;
    float: top;
    position: absolute;
    top:135px;
    bottom: 38px;

}
#footer {
    background-color: PaleGoldenRod;
    width:100%;
    height: 38px;
    bottom:0;
    position:absolute;
}

<div id="header">header <span id="mousestatus"></span>
 <span id="clickevent"></span>

</div>
<div id="main">main area:
The bottom shelf will slide over this.
</div>

<div id="dragbar">drag me up or down</div>

<div id="bottomshelf">
    
<span id="position"></span>

bottom shelf</div>

<div id="footer">footer</div>

Answer 3

我没有足够的声誉来为“SoonDead”的解决方案添加评论，所以我必须这样做。 :-(解决方案很棒，除了IE8以外，我的工作也很好。

1）这条线 e.preventDefault(); IE8有两个问题

没有定义“e”的论证。
没有为e

所以上面的行被替换为： e = e || window.event; e.preventDefault ? e.preventDefault() : e.returnValue=false;

以上停止了错误（我在这里停止了，因为我并不真正关心IE8，但是不想为不幸的用户弹出错误框）。所以，是的，在我的应用程序IE8用户无法调整大小。

然而，我确实追了一下，发现了这些问题：

代码流未进入onmousemove函数
e.pageX必须由e.clientX或e.screenX替换（取决于您的情况），因为我在IE8调试器中看不到pageX作为属性。

Answer 4

Here are some options discussed on SO

我的个人推荐是jQuery Resizable。

正如BenjaminGruenbaum在评论中所说，jQuery 是 JavaScript。如果您不想加载完整的jQuery库，则需要找到所需的jQuery库的哪些部分，并提取要使用的源JavaScript。这肯定是可行的。

模拟框架集分隔符行为

4 个答案: