表格中的可拖动 div 元素位于其他表格单元格的后面答案

【问题标题】：Draggable div elements in table go behind others table cells表格中的可拖动 div 元素位于其他表格单元格的后面
【发布时间】：2023-03-30 18:30:02
【问题描述】：

所以我正在用 JS (+jQuery) 制作国际象棋游戏，最后要做的就是让棋子可拖动。

我的板是常规的 html 表（带有 TR 和 TD），其中 DIV 包含片段。我正在使用 jQuery UI 使 DIV 可拖动，但每次我尝试将带有一块的 DIV 拖动到其他位置时，它都会保持在同一个 td 中： 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();

我怎样才能让他们走出牢房？

【问题讨论】：

标签： jquery html-table cell draggable behind

【解决方案1】：

看来我的 TD 元素已经得到了

overflow: hidden;

没有上面它完美地工作：D

【讨论】：

【解决方案2】：

try

containment:'window',

而不是

appendTo: 'body',

或者同时尝试它们

另外你可以用options设置Z-index

【讨论】：