JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div class="holder">
    <div class="marble"></div>
</div>
<div class="holder"></div>
<div class="holder"></div>

CSS

.holder {
    background: #bbb;
    display: inline-block;
    height: 44px;
    margin: 3px 8px;
    padding: 0;
    width: 44px;
}
.marble {
    background: #333;
    height: 44px;
    margin: 0;
    padding: 0;
    width: 44px;
}

JavaScript

var currentMarble;

MakeDraggable($('.marble'));

$('.holder').droppable({
    drop: function(event, ui) {
        currentMarble.css("top", 0);
        currentMarble.css("left", 0);
        $(this).append(currentMarble);
        MakeDraggable($(this).find('.marble'));
    }
});

function MakeDraggable (marble)
{
    marble.draggable({
        start: function(event, ui) {
            currentMarble = $(this).clone();
        },
        stop: function(event, ui) {
            $(this).remove();
        }
    });
}