JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
</div>

CSS

#outer {
    background: blue;
    width: 200px;
    height: 200px;
}
.inner {
    background: yellow;
    width: 50px;
    height: 50px;
}

JavaScript

$("#outer").on("mousedown", function (e) {
    var inner = $("<div/>", {class:"inner"}).draggable().appendTo("#outer");
    inner.css("position", "absolute");
    e.type = "mousedown.draggable";
    e.target = inner[0];
    inner.css("left", e.pageX);
    inner.css("top", e.pageY);
    inner.trigger(e);
    return false;
});