JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<div class="js-factory factory">
    <div class="js-park park"></div>
    <div class="js-form">
        <div class="js-base base"></div>
    </div>
</div>

CSS

.factory {
    width:100%;
    border:1px solid black;
    float:left;
}
.park {
    float:left;
    background:lightblue;
    height:10em;
    width:10em;
}
.base {
    width:2em;
    height:2em;
    background:red;
    float:right;
    border:2px solid green;
}
.fig-wrap {
    background:blue;
    width:1em;
    height:1em;
}

JavaScript

var currObj = null;

$(".js-factory").on("mousedown", ".js-form .js-base", function (event) {
    var figurka = $(this).clone(false).addClass("figurka").draggable({
        snapMode:	"inner",
        snapTolerance	:	55
    }).wrapInner("<div class='fig-wrap'></div>");
    $(".js-park").append(figurka);
    currentObj = figurka.css("display", "none");
});

$(document)
    .on("mousemove", function (e) {
        if (currentObj) {
            currentObj.position({of: e}).css("display","");
        }
    })
    .on('mouseup', function () {
        currentObj = null;
    });