JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<div id="dragItems"></div>

CSS

.dragdiv
{
    width:100px;
    height:100px;
    text-align:center;
    border:1px solid gray;
    margin-left:2px;
    margin-top:2px;
    float:left;
}

JavaScript

$(document).ready(function() {
    for (var i = 1; i < 11; i++) {
        var $newDiv = $("<div class='dragdiv'>" + i + "</div>");
        makeElementAsDragAndDrop($newDiv);
        $("#dragItems").append($newDiv);
    }

    function makeElementAsDragAndDrop(elem) {
        $(elem).draggable({
            snap: '#droppable',
            snapMode: 'outer',
            revert: "invalid",
            cursor: "move",
            helper: "clone"
        });
        $(elem).droppable({
            drop: function(event, ui) {
                var $dragElem = $(ui.draggable).clone().replaceAll(this);
                $(this).replaceAll(ui.draggable);
                makeElementAsDragAndDrop(this);
                makeElementAsDragAndDrop($dragElem);
            }
        });
    }
});