JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div style="position: relative; top: 0; left: 0;" onmousedown="return window.dragOBJ(this,event);">
    <textarea>bla-bla</textarea>
</div>

CSS

div {
    background:red
}

JavaScript

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));
}
window.dragOBJ = function (d, e) {
    if (e.target != d) return;
    e.preventDefault();

    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 = '';
    };
}