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 }); });
<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>
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; }