JSFiddle - React, Tailwind, and code Playground

HTML

<div id="el"></div>

CSS

#el {
    width: 40px;   
    height: 40px;
    border: 2px solid #bada55; /* Yes real bad ass */
    background: #1d1f1f;
    border-radius: 5px;
    cursor: move;
    position : absolute;
}

JavaScript

var Drag = {
    off : [0,0],
    init: function(id) {
        //this.el = $('#'+id); <-- this crap down work
        this.el = document.getElementById(id);
        delete this.init;
        return this;
    },
    start : function(e) {
        e = e || window.event;
        $(document).bind('mousemove', Drag.move);
        $(document).bind('mouseup', function(){$(document).unbind('mousemove')});
        var p = $(Drag.el).position();
        console.log(p)
        Drag.off = [e.clientX - p.left, e.clientY - p.top];
    },
    move : function(e) {
        e = e || window.event;
        /* Some bogus calculations - in real code this is coupled with
           function calls and various calculations. Only adding it if the
           "stress" caused could have any effect. */
        var A = {x: e.clientX, y: e.clientY};
        A.x = A.x * 512 / 14 + 33 * 19 - 14 + A.y;
        A.y = A.x * 512 / 14 + 33 * 19 - 14 + A.y;
        A.x = A.x * 512 / 14 + 33 * 19 - 14 + A.y;
        A.y = A.x * 512 / 14 + 33 * 19 - 14 + A.y;
        A.x = A.x * 512 / 14 + 33 * 19 - 14 + A.y;
        A.y = A.x * 512 / 14 + 33 * 19 - 14 + A.y;   
        var Z = Math.sqrt(A.x*A.x - A.y*A.y);
        var Z = Math.PI * A.x / 4 * Math.E;
        Drag.el.style.left = String(e.clientX - Drag.off[0]) + 'px';
        Drag.el.style.top  = String(e.clientY - Drag.off[1]) + 'px';
    }
}.init("el");

$('#el').bind('mousedown', function(e){Drag.start(e);});