使用jqueryui进行国际象棋游戏。我已经使用了Draggable，但我需要使它们不堆叠

我已经做了这个国际象棋游戏，但我需要帮助jQueryUI中的可下拉接受设置

这是小提琴：

我试着这么做，当你扔东西的时候，它会更新所有的td都是空的，但它似乎不起作用

---

你能帮我个忙吗？

问题应该是这样的：

拖动元素后，最近腾空的td不会变为 一个有效的，可放下的，用于未来拖拽的目标

问题是： 您只是在td:empty的初始集上创建了可拖放对象。因此，任何非空td甚至都没有创建可拖放对象来进行操作

解决方案是： 在所有td上创建可拖放对象。然后禁用所有非空td上的可拖放性。请注意，您不必每次都在所有td:empty上启用可拖放性。您只需在最近腾空的td上启用它。（还应在新占用的td上禁用可拖放功能。）

…顺便提一下，棋盘不应该是8x8，而不是10x10吗？

$（文档）。就绪（函数（）{
$(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="<div class='"+cls+"'></div>";
        //alert(i/8)
        if(i/8>1&&i/8<=2||i/8>6&&i/8<=7){

             content="<div class='"+cls+"'><a>&#9817</a></div>";
            }
            if(i/8==0.125||i/8==1||i/8==7.125||i/8==8){

             content="<div class='"+cls+"'><a>&#9814;</a></div>";
            }
            if(i/8==0.25||i/8==0.875||i/8==7.25||i/8==7.875){

             content="<div class='"+cls+"'><a>&#9816;</a></div>";
            }
            if(i/8==0.375||i/8==0.75||i/8==7.375||i/8==7.75){

             content="<div class='"+cls+"'><a>&#9815;</a></div>";
            }
            if(i/8==0.5&&i/8<=2||i/8==7.5&&i/8<=8){

             content="<div class='"+cls+"'><a>&#9813;</a></div>";
            }
            if(i/8==0.625&&i/8<=2||i/8==7.625&&i/8<=8){

             content="<div class='"+cls+"'><a>&#9812;</a></div>";
            }



            $("#board").append(content);
            //$("#board").append("<div class='"+k+"'></div>");
            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();



    });

var-cls=''；
var x=1；
对于（i=1；i1&&i/86&&i/8谢谢：）我必须再试一点，人们似乎无法回答我的问题，呵呵。我不明白问题到底是什么。我看不出你提供的小提琴有什么问题。你能更彻底地描述一下你的问题吗？我只花了30分钟对小提琴进行故障排除，结果发现它根本没有坏。使用jquery 1.7。2而不是jquery（edge）可以很好地工作。我已经将fiddle更新为使用1.7.2.chess board使用jquery一些代码描述将帮助读者理解您的解决方案。
$(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="<div class='"+cls+"'></div>";
        //alert(i/8)
        if(i/8>1&&i/8<=2||i/8>6&&i/8<=7){

             content="<div class='"+cls+"'><a>&#9817</a></div>";
            }
            if(i/8==0.125||i/8==1||i/8==7.125||i/8==8){

             content="<div class='"+cls+"'><a>&#9814;</a></div>";
            }
            if(i/8==0.25||i/8==0.875||i/8==7.25||i/8==7.875){

             content="<div class='"+cls+"'><a>&#9816;</a></div>";
            }
            if(i/8==0.375||i/8==0.75||i/8==7.375||i/8==7.75){

             content="<div class='"+cls+"'><a>&#9815;</a></div>";
            }
            if(i/8==0.5&&i/8<=2||i/8==7.5&&i/8<=8){

             content="<div class='"+cls+"'><a>&#9813;</a></div>";
            }
            if(i/8==0.625&&i/8<=2||i/8==7.625&&i/8<=8){

             content="<div class='"+cls+"'><a>&#9812;</a></div>";
            }



            $("#board").append(content);
            //$("#board").append("<div class='"+k+"'></div>");
            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();



    });