JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div class="asd" style="position: relative; top: 0; left: 0"></div>

CSS

.asd {
    width:100px;
    height:100px;
    background:red;
}

JavaScript

var div = document.getElementsByClassName("asd")[0];
div.onmousedown = dragOBJ;

if (window.localStorage) {
    div.style.left = localStorage.left || "0px";
    div.style.top = localStorage.top || "0px";
}

function $(v) {
    return (document.getElementById(v));
}

function agent(v) {
    return (Math.max(navigator.userAgent.toLowerCase().indexOf(v), 0));
}

function xy(e, v) {
    return (v ? (agent('msie') ? event.clientY + document.body.scrollTop : e.pageY) : (agent('msie') ? event.clientX + document.body.scrollTop : e.pageX));
}

function dragOBJ(e) {
    var d = this,
        e = e || event;

    function drag(e) {
        if (!stop) {
            d.style.top = (tX = xy(e, 1) + oY - eY + 'px');
            d.style.left = (tY = xy(e) + oX - eX + 'px');
        }
    }
    var oX = parseInt(d.style.left),
        oY = parseInt(d.style.top),
        eX = xy(e),
        eY = xy(e, 1),
        tX, tY, stop;
    document.onmousemove = drag;
    document.onmouseup = function () {
        stop = 1;
        document.onmousemove = '';
        document.onmouseup = '';
        if (window.localStorage) {
            localStorage.left = d.style.left;
            localStorage.top = d.style.top;
        }
    };
    return false;
}