JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable" id="345">Content</div>

CSS

div { width: 200px; height: 200px; border: 1px solid black; }

JavaScript

var dragging = {};

$(document).ready(function() {

    $("div.draggable").on("drag", function (e) { console.log("dragging!"); });
    $("div.draggable").on("mousedown", function (e) {
		var offset = $(e.target).offset();
        dragging.id = $(e.target).attr('id');
		
		// Want to reposition relative to initial click in element
        dragging.offset_top = e.pageY - offset.top;
        dragging.offset_left = e.pageX - offset.left;
		
		// Set up state
		dragging.active = true;
		dragging.redraw = null;
		dragging.redraw_queue = null;

		// Move handler, defers redrawing to ease CPU load
		$(document.body).on("mousemove", function(e) {
			dragging.redraw_queue_top = e.pageY;
			dragging.redraw_queue_left = e.pageX;
			if (dragging.redraw == null) {
				dragging.redraw = setTimeout(draggableRedraw, 50);
			}
		});
    
		// "Drop" handler uninstalls handlers
		$(document.body).on("mouseup", function (e) {
			if (dragging.redraw != null) {
				draggableRedraw();
			}
			dragging.active = false;
			$(document.body).off("mouseup");
			$(document.body).off("mousemove");
		});

    });
    
});

// Deferred redraw
function draggableRedraw() {
	$("#"+dragging.id).offset({
		top: dragging.redraw_queue_top - dragging.offset_top,
		left: dragging.redraw_queue_left - dragging.offset_left
	});
	dragging.redraw = null;
}