jquery - 使用 jQuery UI 制作国际象棋游戏。我已经使用了 Draggable，但我需要让它们不堆叠

Question

我已经制作了这个国际象棋游戏，但我需要有关 jQuery UI Droppable 中的接受设置的帮助。

这是 fiddle : http://jsfiddle.net/kevinsimper/ZzHjz/3/

我尝试这样做，当你放下某些东西时，它会更新所有空的 td，但它似乎不起作用。

你能帮我吗？

Answer 1

问题可能应该说明:

After dragging an element, the recently vacated td does not become a valid, droppable, target for future drags.

问题是:您仅在初始组 td:empty 上创建可放置对象。因此，任何非空 td 甚至都没有创建可操作的可放置对象。

解决方案是:在所有 td 上创建可放置的对象。然后禁用所有非空 td 的可删除性。请注意，您不必每次都对所有 td:empty 启用可删除性。您只需在最近腾出的 td 上启用它即可。 (您还应该禁用新占用的 td 上的可放置性。)

http://jsfiddle.net/pabo/7M3WJ/

$('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");

...顺便说一句，棋盘不应该是 8x8，而不是 10x10？