用jQuery UI制作国际象棋游戏。 我使用过Draggable，但我需要让它们不能堆叠

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

这是小提琴： http ： //jsfiddle.net/kevinsimper/ZzHjz/3/

我试着这样做，当你放弃一些东西时，它会更新所有td都有空，但它似乎不起作用。

你能帮助我吗？

Answer 1

问题可能应该说明：

拖动元素后，最近腾出的td不会成为未来拖动的有效，可投放的目标。

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

解决方案是：在所有td上创建可放置的对象。 然后禁用所有非空td的droppability。 请注意，您不必每次都在所有td：empty上启用droppability。 你只需要在最近腾出的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"); 

……顺便说一句，国际象棋棋盘不应该是8×8，而不是10×10？

Answer 2

 $(document).ready(function(){ var cls=''; var x=1; for(i=1;i<=64;i++){ if(x && i%2!=0 ||!x&&i%2==0) { cls = "white"; } else { cls="grey"; } var content="
"; //alert(i/8) if(i/8>1&&i/8<=2||i/8>6&&i/8<=7){ content="
♙
"; } if(i/8==0.125||i/8==1||i/8==7.125||i/8==8){ content="
♖
"; } if(i/8==0.25||i/8==0.875||i/8==7.25||i/8==7.875){ content="
♘
"; } if(i/8==0.375||i/8==0.75||i/8==7.375||i/8==7.75){ content="
♗
"; } if(i/8==0.5&&i/8<=2||i/8==7.5&&i/8<=8){ content="
♕
"; } if(i/8==0.625&&i/8<=2||i/8==7.625&&i/8<=8){ content="
♔
"; } $("#board").append(content); //$("#board").append("
"); if(i%8==0) x=!x; } $('a').draggable(); $('div').droppable({ drop: function(ev, ui) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0, left: 0}).appendTo(droppedOn); } }); $(' div').not(' div:empty').droppable(); });