JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder">
    <div id="flyingDiv"></div>
</div>

CSS

html, body {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: center;
}
#flyingDiv{
    position: absolute;
    background-color: green;
    width: 10px !important;
    height: 10px !important;
    left: 195px;
    top: 195px;
}
#holder{
    position: relative;
    margin: 20px auto;
    border: 1px solid black;
    width: 400px !important;
    height: 400px !important;
}

JavaScript

$(function(){
    /*
    div.draggable({
        drag: function(event, ui){
            //
        }
    });
    */
    ///*
    $("#flyingDiv").on("movemove", function(e) {
        $(this).data("pressed", !$(this).data('pressed'));
    });
    $("#holder").on("mousemove", function(e) {
        var div = $("#flyingDiv");
        if (div.data("pressed") === true && e.eventPhase == 2){
            var width = div.width();
            var offsetX = e.offsetX;
            if (offsetX >= width / 2 && ($(this).width() - offsetX) >= width / 2) {
                div.css("left", parseInt(offsetX - width / 2) + "px");
            }
            var height = div.height();
            var offsetY = e.offsetY;
            if (offsetY >= height / 2 && ($(this).height() - offsetY) >= width / 2) {
                div.css("top", parseInt(offsetY - height / 2) + "px");
            }
        }
    });
    //*/
});