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"/>
         </td>
         <td>
             <div id="hotTub" class="lockerRoom hotTub"/>
         </td>
     </tr>
</table>

CSS

body  {
    padding: 100px;
}
.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 = Ext.get('maleLockerRoom').select('div');
Ext.each(male.elements, function(elem) {
    var dd = Ext.create('Ext.dd.DD', elem, 'males', {
        isTarget: false
    });
});
var female = Ext.get('femaleLockerRoom').select('div');
Ext.each(female.elements, function(elem) {
    var dd = Ext.create('Ext.dd.DD', elem, 'females', {
        isTarget: false
    });
});