JSFiddle - React, Tailwind, and code Playground

by powerMugen

HTML

<div id="wrapper">
            <div class = "col" id="col1">
                <div id="drag1" class="drag">
                   01
                </div>
                <div id="drag1" class="drag">
                   02
                </div>
                <div id="drag1" class="drag">
                   03
                </div>
                <div id="drag1" class="drag">
                   04
                </div>
                <div id="drag1" class="drag">
                   05
                </div>
            </div>
            <div class="col" id ="droppable">
            </div>
        </div>

CSS

.col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:200px;
    height:500px;
    border:1px solid black;

}

.drag{
    width:56px;
    
    height:56px;
    position:relative;
    background-color:red;
}

#droppable{
    width:500px;
    height :500px;
    border:1px solid black;
    padding:0;
    }
#droppable.relative {position:relative;}

JavaScript

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        appendTo:'body',
        cursor: 'move',
        containment: '#droppable',
        snapTolerance: 0,
        grid:[8,8]
    });

            $("#droppable").droppable({

                drop: function (e, ui) {
                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original',
                        cursor: 'move',
                        containment: '#droppable',
                        snapTolerance: 0,
                        grid:[8,8]
                    });
                    x.appendTo('#droppable');
                }

                }
            });
    
});