JSFiddle - React, Tailwind, and code Playground

by sergey77

HTML

<html>
    <div id="draggable" style="background: cyan; width: 40px; height: 40px; position: absolute; left: 100px; top:100px">Drag me!</div>
<html>

JavaScript

var lastX, lastY;
var isDragging = false;

$("#draggable").mousedown(function(e) {
    isDragging = true;
    lastX = e.pageX;
    lastY = e.pageY;
});


$("#draggable").mouseup(function() {
    isDragging = false;
});


$("#draggable").mousemove(function(e) {
    if(isDragging)
    {
        e.target.style.left = 
            parseFloat(e.target.style.left) + e.pageX - lastX + "px";
        e.target.style.top = 
            parseFloat(e.target.style.top) + e.pageY - lastY + "px";
        lastX = e.pageX;
        lastY = e.pageY;
    }
});