JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<div id="dragTarget"
     style="background-color: #000000; border: 1px solid #666666;
            color: #ffffff; padding: 10px; position: absolute;
            font-family: sans-serif; cursor: move">
Drag Me!
</div>

JavaScript

var $dragTarget = $('#dragTarget');

var isDrag = false, client, offset;

$dragTarget.mouseup(function (ev) { 
    isDrag = false;
});

$(document).mousemove(function (ev) {    
    if (isDrag) {
        $dragTarget.css({ 
            left: offset.left + ev.clientX - client.x,            
            top: offset.top + ev.clientY - client.y        
        });   
    }
});

$dragTarget.mousedown(function (ev) {
    isDrag = true;
    offset = $dragTarget.offset();
    client = {x: ev.clientX, y: ev.clientY};
     
    return false;
});