JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div id="mydiv">
    <div id="mid"></div>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
#mydiv {
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    top:300px;
    left:200px;
}
#mid {
    position:relative;
    width:40px;
    height:40px;
    margin:30px 30px;
    background-color:orange;
}

JavaScript

var gotit = false;
var i, p, q;
var divs = document.getElementById("mydiv");
divs.addEventListener('mousedown', clipit, false);
divs.addEventListener('mousemove', function (e) {
    moveit(e);
}, false);
divs.addEventListener('mouseup', unclip, false);
divs.addEventListener('mouseout', unclip, false);

function clipit(e) {
    i = divs.offsetLeft;
    gotit = true;

    p = e.clientX;
    q = e.clientY;
}

function moveit(e) {

    if (gotit == true) {

        if (e.clientX > divs.offsetLeft) {

            divs.style.left = divs.offsetLeft + (e.clientX - p) + "px";
            p = e.clientX;
        }
        if (e.clientY > divs.offsetTop) {
            divs.style.top = divs.offsetTop + (e.clientY - q) + "px";
            q = e.clientY;
        }
    }
}

function unclip() {
    gotit = false;

}