javascript - Emulate Frameset Separator Behavior -

the html5 current specification removed <frameset> tag.

there nice feature of <frameset> not easy reproduce without it:

in frameset, can change position of line separating frames mouse.

how provide same functionality with using divs in javascript?

i've come across the following demonstrates behavior i'm looking for. avoid using jquery, though using jquery should preferred way.

after looking @ example fiddle, can quite easy without jquery.

all functions there simple innerhtml , style manipulation, , event subscription.

a direct rewrite of code without jquery be:

var = 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 mouseup event' + i++;     window.onmousemove = null; }; 

so here same fiddle pure js.

---

edit: @benjamingruenbaum pointed out, overriding on* properties on dom element not same specifying new event handler.

overriding properties onmouseup, onload, onclick on dom elements "old" way, , therefore supported in stone age of js. code above written that.

nowadays standard way of adding , removing event handlers addeventlistener , removeeventlistener. not supported in old ie (but can worked around).

it let's attach unlimited number of listeners same event , not interfere each other.

so same functionality can achieved by:

var = 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 mouseup event' + i++;     window.removeeventlistener("mousemove", windowmousemove, false); }  document.getelementbyid("dragbar").addeventlistener("mousedown", dragbarmousedown, false);  window.addeventlistener("mouseup", windowmouseup, false); 

fiddle.

note in case functions not anonymous, self executing function scoping make sense here, if not in function scope.