JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="draggableBarContainer">
    <div id="draggableBar"></div>
</div>
<div id="log"></div>

CSS

#draggableBarContainer {
    width:10px;
    height:104px;
    background-color:#bbb;
    top:100px;
    left:120px;
    position:absolute;
}
html, body {
    margin:0;
    padding:0;
}
#draggableBar {
    height:50%;
    width:100%;
    background-color:#333;
    position:relative;
    top:0px;
}
body{
    height:900px;
}

JavaScript

var mouseDown = false;
var divOffset = {
    x: 0,
    y: 0
};
var bar = document.getElementById('draggableBar');
window.addEventListener('mousedown',function(e){
	if(e.target.id == 'draggableBar'){
       mouseDown = true;
        divOffset.x = e.offsetX;
        divOffset.y = e.offsetY;
    }
});
window.addEventListener('mouseup',function(){
	mouseDown = false;
});
window.addEventListener('mousemove',function(e){
    if(mouseDown == true){
        if(e.target.id == 'draggableBar'){
        	divOffset.y = e.offsetY;   
        }
        //get var offset top relative to document
        var container = document.getElementById('draggableBarContainer');
        var barRect = bar.getBoundingClientRect();
        var barOffsetTop = window.pageYOffset+barRect.top;//distance between the bar and top of document
        var containerRect = container.getBoundingClientRect();
        var containerTop = window.pageYOffset+containerRect.top;//distance between the track and top of document
        if(containerTop <= barOffsetTop && e.y-containerTop+divOffset.y > 0){
            //allow dragging down
            bar.style.top = e.y-containerTop+divOffset.y+'px';
         	//bar.style.top = e.y-+'px';   
        }
        console.log(e.offsetY+' | '+divOffset.y);
    }
});

/*var mouseDown = false;
var divOffset = {
    x: 0,
    y: 0
};
window.addEventListener("mousedown", function (e) {
    if (e.target.id == 'draggableBar') {
        mouseDown = true;
        divOffset.x = e.offsetX;
        divOffset.y = e.offsetY;
    }
});
window.addEventListener("mouseup", function () {
    mouseDown = false;
});
window.addEventListener("mousemove", function (e) {
    if (mouseDown == true) {
        var scrollBarButton = document.getElementById('draggableBar');
        if ((scrollBarButton.parentNode.offsetHeight - scrollBarButton.offsetHeight) >= (e.pageY - scrollBarButton.parentNode.offsetTop - divOffset.y)) {
            if (scrollBarButton.offsetTop >= 0) {
               ...