It appears that my TD elements had got
overflow: hidden;
Without above it works perfectly :D
Question
So I'm making the game of chess in JS (+jQuery) and the last thing to do is to make pieces draggable.
My board is regular html table (with TRs and TDs) with DIVs containing pieces. I'm using jQuery UI to make DIVs draggable, but every time I try to drag a DIV with piece to other place it stays in the same td: http://screenshooter.net/8964979/Klpmu17_06_02_2014__12_38_17
HTML goes like this:
<table>
<tr>
<td class="pole">
<div class="figura">here goes a piece</div>
</td>
<td class="pole">
...
</td>
</tr>
<tr>
...
</tr>
</table>
And then JS:
$(".figura").draggable({
revert: true,
appendTo: 'body',
stack: '.pole',
start: function () {
$('#tabs').css('z-index', '9999');
},
stop: function () {
$('#tabs').css('z-index', '0');
}
});
$(".pole").droppable();
How can I let them go out of their cells?
Solution
It appears that my TD elements had got
overflow: hidden;
Without above it works perfectly :D