JSFiddle - React, Tailwind, and code Playground

by Daniel Pegues

HTML

<div id="header">header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>

<div id="sidebar">
    <span id="position"></span>
    <div id="dragbar"></div>
    sidebar
</div>
<div id="main">main</div>
<div id="footer">footer</div>

CSS

body, html {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
#main {
    background-color: BurlyWood;
    float: right;
    position: absolute;
    top:100px;
    bottom: 38px;
    right: 0;
    left:200px;
}
#sidebar {
    background-color: IndianRed;
    width:200px;
    float: left;
    position: absolute;
    top:100px;
    bottom: 38px;
    overflow-y: hidden;
}
#footer {
    background-color: PaleGoldenRod;
    width:100%;
    height: 38px;
    bottom:0;
    position:absolute;
}
#header {
    background-color: wheat;
    width:100%;
    height: 100px;
}
#dragbar {
    background-color:black;
    height:100%;
    position:absolute;
    top:0;
    right: 0;
    width: 3px;
    cursor: col-resize;
}

JavaScript

var i = 0;
$('#dragbar').mousedown(function (e) {

    e.preventDefault();
    $('#mousestatus').html("mousedown" + i++);
    var limits = {
        min:  50,
        max:  $(document).width() - 50
    };
    
    $(document).mousemove(function (e) {
        var newX = e.pageX + 2;
        if (newX >= limits.min && newX <= limits.max) {
            $('#position').html(e.pageX + ', ' + e.pageY);
            $('#sidebar').css("width", newX);
            $('#main').css("left", newX);
        }
    });
    
    console.log("leaving mouseDown");
});

$(document).mouseup(function (e) {
    $('#clickevent').html('in another mouseUp event' + i++);
    $(document).unbind('mousemove');
});