JSFiddle - React, Tailwind, and code Playground

by gultaj

HTML

<table> 
    <tr> 
        <td align='center'>Male Locker Room</td>
        <td align='center'>Female Locker Room</td> 
    </tr>
    <tr> 
<td>
            <div id="maleLockerRoom" class="lockerRoom">
                <div>Jack</div> 
                <div>Aaron</div>
                <div>Abe</div> 
            </div>
        </td> 
        <td> 
            <div id="femaleLockerRoom" class="lockerRoom"> 
                <div>Sara</div>
                <div>Jill</div> 
                <div>Betsy</div>
            </div> 
        </td>
    </tr> 
</table>
<table>
     <tr>
         <td align='center'>Pool</td>
         <td align='center'>Hot Tub</td>
     </tr>
     <tr>
         <td>
             <div id="pool" class="lockerRoom pool"></div>
         </td>
         <td>
             <div id="hotTub" class="lockerRoom hotTub"/>
         </td>
     </tr>
</table>

CSS

body  {
    padding: 50px;
}
.lockerRoom {
    width: 150px;
    border: 1px solid;
    padding: 10px;
    background-color: #ECECEC;
}
.lockerRoom div {
    border: 1px solid #FF0000;
    background-color: #FFFFFF;
    padding: 2px;
    margin: 5px;
    cursor: move;
}
.pool {
    background-color: #CCCCFF;
}
.hotTub {
    background-color: #FFCCCC;
}
.dropZoneOver {
    background-color: #99FF99;
}

JavaScript

var male = $("#maleLockerRoom>div");
$(male).draggable({
    revert: "invalid",
    stack: male
});
$("#pool").droppable({
    accept: male,
    drop: function(event, ui) {

        $(this).append($('<div>'+ui.draggable.html()+'</div>'));
        $("#pool>div").draggable({revert: "invalid"});
        $(ui.draggable).remove();
        
        
    }
});