JSFiddle - React, Tailwind, and code Playground

by thilakar

HTML

<div class="draggable">
<ul>
<li class="list" id="1">Teacher1</li>
<li class="list" id="2">Teacher2</li>
<li class="list" id="3">Teacher3</li>
<li class="list" id="4">Teacher4</li>
</ul>
</div>
<div class="drop">
<table class="tble">
<tr>
<td class="drop1 br" id="td1">&nbsp;</td>
<td class="drop1 br" id="td2">&nbsp;</td>
<td class="drop1 br" id="td3">&nbsp;</td>
<td class="drop1 br" id="td4">&nbsp;</td>
</tr>
<tr>
<td class="drop1 br" id="td1">&nbsp;</td>
<td class="drop1 br" id="td2">&nbsp;</td>
<td class="drop1 br" id="td3">&nbsp;</td>
<td class="drop1 br" id="td4">&nbsp;</td>
</tr>
</table>
</div>

CSS

.draggable {
width:200px;
height:200px;
border:solid 1px #ccc;
}
.dropareahover {
            background-color:#EFD2A4;
            border-color:#DFA853;
 }
.draggable ul {
margin:0px;
padding:0px;
}
.draggable ul li {
list-style-type:none;
}
.drop {
width:200px;
height:200px;
margin:10px 0px 0px 0px;
border:solid 1px #ccc;
}
.drop1 {
border:solid 1px #CCCCCC;
width:100px;
}
.drop ul {
margin:0px;
padding:0px;
}
.drop ul li {
list-style-type:none;
}
.tble{padding:0px 10px 0px 10px}

JavaScript

$(document).ready(function() {
    $(".list").draggable({helper: 'clone'});
    $(".drop1").droppable({
        accept: '.list',
        hoverClass: 'dropareahover',
        drop: function(ev, ui){
        var dropElemId = $(this).attr("id");    
        var toGether = $("#" +dropElemId, ".tble");     
        toGether.append(ui.draggable.html());    
        })
 });
 });