JSFiddle - React, Tailwind, and code Playground

HTML

<div id="object1"></div>
<div id="object2"></div>
<div id="object3"></div>

CSS

#object1,
#object2,
#object3 {
    position: absolute;
    width: 100px; height: 100px;
    border-radius: 5px;
}
#object1 {
    top: 0px; left: 0px;
    background: #1b2669;
}
#object2 {
    top: 300px; left: 100px;
    background: #d13cc1;
}
#object3 {
    top: 100px; left: 400px;
    background: #3cd17b;
}

JavaScript

$.fn.draggable = function() {
    return $.each(this, function() {
        var $el = $(this);
        var move = function(e) {
            if(!$el.data("_isMove")) return;

            var pos = $el.data("pos"),
                pos = { x: parseInt($el.css("left")) + (e.clientX - pos.x),
                        y: parseInt($el.css("top")) + (e.clientY - pos.y) };
            
            $el.css({ top: pos.y, left: pos.x });
            $el.data("pos", { x: e.clientX, y: e.clientY });
        };
        $el.on("mousedown", function(e) {
            var $this = $(this);
            
            $el.data("_isMove", true);
            $el.data("pos", { x: e.clientX, y: e.clientY });
        });
        $el.on("mouseup mouseout", function(e) {
            $el.data("_isMove", false);
        });
        $el.mousemove(move);
    });
};

$("#object1, #object2, #object3").draggable();