JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrap'></div>
<div id='console'>Move box for data...</div>

CSS

* {
    font-family:arial;
}
#wrap {
    position:absolute;
    width:150px;
    height:200px;
    left:0px;
    top:0px;
    overflow:hidden;
    overflow-y:auto;
    border:1px solid black;
}
#console {
    position:absolute;
    width:150px;
    height:auto;
    left:0px;
    top:200px;
    overflow:hidden;
    overflow-x:auto;
    border:1px solid black;
}
.dragObject {
    position:absolute;
    width:50px;
    height:50px;
    background:rgba(0, 0, 0, 0.1);
    border:1px solid rgba(0, 0, 0, 0.2);
    cursor:move;
}

JavaScript

function eventData(e) {
    return {
        event: e || window.event,
        sender: e.srcElement || e.target,
    };
};

$(document).ready(function (e) {
    function getScrollInfo($element){
            var text = 'scrollHeight: ' + $element[0].scrollHeight + '<br/>';
            text += ' Height: ' + $element.height() + '<br/>';
            text += ' scrollTop: ' + $element.scrollTop() + '<br/>';
            info.html(text);
        return{ height:$element[0].scrollHeight}
        };
    
    var info = $('#console'),
        content = $('#wrap');
        content.on('resize overflow', getScrollInfo(content));
    
    var dragObject = $('<div/>').addClass('dragObject').appendTo(content)
        .on('mousedown mouseup', function (e) {
        var sender = eventData(e).sender,
            event = eventData(e).event,
            $sender = $(sender);

        if (event.type == 'mousedown') {
            var mouseStartPosition = {
                x: event.pageX,
                y: event.pageY,
            },
            elementPosition = {
                left: parseInt($sender.css('left')),
                top: parseInt($sender.css('top')),
            };
            $(window).on('mousemove', function (esub) {
                var subEvent = eventData(esub).event,
                    mx = (subEvent.pageX - mouseStartPosition.x) || 0,
                    my = (subEvent.pageY - mouseStartPosition.y) || 0,
                    position = {
                        left: (elementPosition.left + mx),
                        top: (elementPosition.top + my),
                    };
                $sender.css(position);
                //getScrollInfo(content);
            });
        }
        if (event.type == 'mouseup') {
            $(window).off('mousemove');

        }
    });
});