Перетаскиваемые элементы div в таблице идут за другими ячейками таблицы.

Итак, я делаю игру в шахматы в JS (+jQuery), и последнее, что нужно сделать, это сделать фигуры перетаскиваемыми.

Моя доска - это обычная HTML-таблица (с ТР и ТД) с DIV, содержащими фигуры. Я использую пользовательский интерфейс jQuery, чтобы сделать DIV'ы перетаскиваемыми, но каждый раз, когда я пытаюсь перетащить DIV с частью в другое место, он остается в том же формате: http://screenshooter.net/8964979/Klpmu17_06_02_2014__12_38_17

HTML выглядит так:

<table>
    <tr>
        <td class="pole">
            <div class="figura">here goes a piece</div>
        </td>
        <td class="pole">
            ...
        </td>
    </tr>
    <tr>
        ...
    </tr>
</table>

И тогда 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();

Как я могу отпустить их из своих камер?

Источник

2 ответа

Решение

Похоже, что мои элементы TD получили

overflow: hidden;

Без выше работает отлично:D

Источник

пытаться

containment:'window',

вместо

appendTo: 'body',

Или попробуйте оба варианта одновременно

Дополнительно вы можете установить Z-index с опциями

Источник
Другие вопросы по тегам