Draggable div elements in table go behind others table cells

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?

Answer 1

It appears that my TD elements had got

overflow: hidden;

Without above it works perfectly :D

Answer 2

try

containment:'window',

instead of

appendTo: 'body',

Or try them both at the same time

Additon you can set Z-index with options