JSFiddle - React, Tailwind, and code Playground

HTML

<div id="back"></div>
<div class="draggable" style="background-color: green;"></div>
<div class="draggable" style="top: 125px;"></div>

CSS

.draggable {
    background-color: red;
    width: 40px;
    height: 80px;
    position: fixed;
    top: 0px;
    left: 0px;
}
#back {
    background-color: blue;
    width: 400px;
    height: 250px;
    position: fixed;
    top: 0px;
    left: 0px;
}

JavaScript

var maxWidth = window.innerWidth;
var maxHeight = window.innerHeight;
var midDragWidth = 20; //half width of draggable
var midDragHeight = 40; //half height of draggable

var draggables = document.getElementsByClassName("draggable");
var drags = Array.prototype.slice.call(draggables);
console.log(drags);
for (var key in drags) {
    var drag = draggables[key];
    drag.onmousedown = function () {
        var tmpDrag = this;
        document.onmousemove = function (e) {
            x = e.clientX;
            y = e.clientY;
            if (maxHeight - midDragHeight < y) {
                y = maxHeight - midDragHeight;
            } else if (0 > y - midDragHeight) {
                y = midDragHeight;
            }
            if (maxWidth - midDragWidth < x) {
                x = maxWidth - midDragWidth;
            } else if (0 > x - midDragWidth) {
                x = midDragWidth;
            }
            tmpDrag.style.top = (y - midDragHeight) + "px";
            tmpDrag.style.left = (x - midDragWidth) + "px";
        };
    };

    drag.onmouseup = function () {
        document.onmousemove = null;
    }
}