JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="container">
    <div id="draggable"></div>
    <div id="testing"></div>
</div>

CSS

#container {
    width:80%;
    height:80%;
    border:10px solid #000;
    position:relative;
    top:125vh;
    overflow:auto;
}
html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
#draggable {
    width:50px;
    height:50px;
    background-color:red;
    z-index:1000000;
    position:absolute;
}
#testing{
    width:100vh;
    height:150vw;
    background:orange;
}

JavaScript

window.addEventListener('load', function () {
    var draggable = document.getElementById('draggable');
    var container = document.getElementById('container');
    var mouseDown = false;
    var xOffset = 0;
    var yOffset = 0;
    window.onmousedown = function (e) {
        var elem = e.target;
        if (elem.id == 'draggable') {
            mouseDown = true;
            xOffset = e.offsetX;
            yOffset = e.offsetY;
        }
    };
    window.onmousemove = function (e) {
		if(mouseDown == true){
            var containerRect = container.getBoundingClientRect();
        	var containerOffset = document.body.scrollTop+containerRect.top;
            var draggableRect = draggable.getBoundingClientRect();
            var draggableOffset = document.body.scrollTop+draggableRect.top-draggable.offsetHeight;
            //console.log(containerOffset + ' | ' + draggableOffset);
            console.log(containerRect.top + ' | ' + window.innerHeight)
        }
    };
    window.onmouseup = function (e) {
        mouseDown = false;
    };
});