JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div id='element'></div>
</div>

CSS

#container { position: absolute; top: 20px; left:20px; bottom: 20px; right: 20px; border: solid 3px #000; }

#element { 
   border-radius: 20px;
   height:20px; 
   width: 20px;
   border: solid black 3px;
   cursor: pointer;
   position: absolute;
}

#container.dragging { border: solid 3px #888;}
#container.dragging #element { border-color: orange; }

JavaScript

$(function() {
    var helper = $("#element");
    var helperHeight = helper.outerHeight();
    var helperWidth = helper.outerWidth();
    
    function ondrag(dragX, dragY) {
        helper.css({
            "left": dragX - helperWidth / 2,
            "top": dragY - helperHeight / 2
        });
    }
    
    draggable($("#container"), ondrag);
});

    function draggable(element, onmove, onstart, onstop) {
        onmove = onmove || function () { };
        onstart = onstart || function () { };
        onstop = onstop || function () { };
        var doc = element.ownerDocument || document;
        var dragging = false;
        var offset = {};
        var maxHeight = 0;
        var maxWidth = 0;
        var IE = $.browser.msie;
        var hasTouch = ('ontouchstart' in window);

        var duringDragEvents = {};
        duringDragEvents["selectstart"] = prevent;
        duringDragEvents["dragstart"] = prevent;
        duringDragEvents[(hasTouch ? "touchmove" : "mousemove")] = move;
        duringDragEvents[(hasTouch ? "touchend" : "mouseup")] = stop;

        function prevent(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.returnValue = false;
        }

        function move(e) {
            if (dragging) {
                // Mouseup happened outside of window
                if (IE && !(document.documentMode >= 9) && !e.button) {
                    return stop();
                }

                var touches = e.originalEvent.touches;
                var pageX = touches ? touches[0].pageX : e.pageX;
                var pageY = touches ? touches[0].pageY : e.pageY;

                var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
                var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));

                if (hasTouch) {
                    // Stop scrolling in iOS
          ...