JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div id="leftCol">
        <div class='item'>
                Yo
        </div>
        <div class='item'>
                Yo
        </div>
    </div>

    <div id="rightCol">
        <div id="dest" class='destination'>
        </div>
        <div id="dest" class='destination'>
        </div>
    </div>

CSS

#leftCol {
    float: left;
    width: 20%;
    height: 500px;
    border: 1px solid blue;
}

#rightCol {
    float: left;
    height: 500px;
    width: 79%;
    border: 1px solid red;
}

.item {
    cursor: move;
    width: 20px;
    height: 30px;
    border: 1px solid orange;
}

.destination {
    width: 30px;
    height: 40px;
    border: 1px solid green;
}

JavaScript

$(function(){ 
    
    $('.item').draggable({
    });
    
    $('.destination').droppable({
        drop: function(event, ui){
            console.log('hiii');
        }
    });
    
});