JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<img src="http://placehold.it/50x50" class="doodad">
<img src="http://placehold.it/50x50" class="doodad">
<img src="http://placehold.it/50x50" class="doodad">
<img src="http://placehold.it/50x50" class="doodad">
<div class="box" />

CSS

.box {
    width:500px;
    height:500px;
    background: orange;
}

JavaScript

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (e, ui) {
            if ($(ui.draggable).hasClass('copied')) return
            var droppedItem = $(ui.draggable).clone().addClass('copied').css({
                position: "relative",
                top: $(ui.helper).position().top - $(this).position().top,
                left: $(ui.helper).position().left - $(this).position().left
            }).draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);

        }
    });
});