Making a Chess Game with jQuery UI. I have used Draggable, but i need to make them not stack
http://stackoverflow.com/questions/9770935/making-a-chess-game-with-jquery-ui-i-have-used-draggable-but-i-need-to-make-th/10338542#10338542
by Michael Lajlev
HTML
<table id="chess">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="acceptable">♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
<td><a>♙<a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
...
CSS
#chess {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
td {
width: 40px;
height: 40px;
}
a {
font-weigt: 600;
font-size: 30px;
color: white;
text-shadow: black 1px 1px 2px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
background-color: grey;
}
tr:nth-child(odd) td:nth-child(odd), tr:nth-child(even) td:nth-child(even){
background-color: #CCC;
}
JavaScript
$('a').draggable({ containment: "table", revert: 'invalid' });
$('td').droppable({
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
$(droppedOn).droppable("disable");
$(dropped).parent().droppable("enable");
$(dropped).detach().css({top: 0, left: 0}).appendTo(droppedOn);
}
});
$('td').not('td:empty').droppable("disable");