JSFiddle - React, Tailwind, and code Playground

by JEFFERY PARNAU

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-25);
    inner.css("top", e.pageY-25);
    inner.trigger(e);
    return false;
});
$("#inner").on("mouseup", function (e) {
	alert("remove the div");
/*     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; */
});