Javascript jQueryUI拖放的奇怪行为

请原谅我缺乏使用JQuery UI的经验，但是，我正在用JavaScript开发一个基于web的两人国际象棋引擎，并决定放弃点式点击，为非移动用户提供一个更友好的拖放功能。对于经常使用jQueryUI的人来说，我遇到的问题很可能是显而易见的。在详细介绍之前，请看一下代码：

$(function(){

    //piece is an img
    $(".piece").mousedown(function() {

        currentPieceLocation = ($(this).closest('div'));
        currentPieceLocation = currentPieceLocation.attr('id');
    });

    $('.piece').draggable({
        snap: ".square",
        snapMode:"inner",
        revert: true   
    });

    //square is a div
    $('.square').droppable({
        greedy: true,
        tolerance: 'fit',
        accept: function(){

        squareToMove = $(this).attr('id');

        //returns true if square being dropped on is a valid move                        
        return isValidMove(currentPieceLocation, squareToMove);

        },

        drop: function(event, ui) {

            //appends img to the valid square / div
            //this appends ok when I inspect the code
            $(ui.draggable).appendTo($(event.target));

            //updates internal board
            //this works fine
            makeMove(currentPieceLocation, squareToMove);                
        }

    });

});

在一个坚果壳中，我有64个div（所有div都有一个square类），使用img为div内的片段创建。我对移动验证没有问题（isValidMove（）工作正常），但是，当我将一个棋子移动到前面的下一个方块时，该棋子想跳上两个方块。不，这和第一个棋子的移动无关。出于测试目的，我禁用了它。现在有趣的是，由于我将Revert设置为“true”而不是“invalid”，在我放下棋子后，棋子尝试向上移动到前面的第二个正方形，然后滑回到我最初放下它的地方，因此它应该在那里。显然，这可能是由于发生了附加。如果我把return改为“invalid”，那么当兵就会跳到前面的第二个方块上，在我放下它之后就呆在那里。即使我可以将“还原”设置为“真”，显然我们也不希望看到当兵尝试向上滑动，然后移回它应该在的位置

---

我觉得问题是因为每个div都有一个square类，当我单击一个工件来移动工件/img时，由于起始位置div有一个square类，所以调用isValidMove（）。我猜这可能是在我没有意识到的情况下增加了额外的动作。。。我的印象是，只有当我在一个可拖放的方块上“拖放”/释放鼠标按钮时，才会调用isValidMove（），而不是当我在包含类方块的div中单击img时。正如我所说，我对jQueryUI没有经验，所以我显然对可拖放和可拖放如何协同工作有些不理解。我见过类似的问题，但没有一个是完全相同的。任何帮助都会很好

看起来我找到了问题的答案，但是，我认为这不是一种干净的（使用克隆）处理问题的方法，但它似乎有效。如果其他人对此有更干净的解决方案，请随时提供：）

---

截至目前，我已经删除了任何链接到工作演示。如果有人真的想知道功能问题是什么，请留言，我会把链接放回去。

请不要写文章。我们可以玩的演示会有很大帮助-更容易理解正在发生的事情以及调试的能力。例如，如果可以使用单个棋子复制问题，则可能不需要包含整个棋盘（以及验证和棋子等）。现在尝试将一个棋子移动到另一个棋子上，并在后面留出一个空白。它跳跃3格，然后向后移动进入另一个棋子后面的空白区域！是的，我想这会有一些奇怪的行为，因为并没有任何东西可以验证典当的移动，那个么它现在就可以向前移动了。

$(function(){


    //piece is an img
    $(".piece").mousedown(function() {

        currentPieceLocation = ($(this).closest('div'));
        currentPieceLocation = currentPieceLocation.attr('id');

    });

    //UPDATED CODE: Added helper, start, and stop
    $('.piece').draggable({
        helper: 'clone',
        start: function() {

        $(this).hide();

        },
        snap: ".square",
        snapMode:"inner",
        revert: true,
        stop: function(){

        $(this).show();

        },
    });

    //square is a div
    $('.square').droppable({
        greedy: true,
        tolerance: 'fit',
        accept: function(){

        squareToMove = $(this).attr('id');

        //returns true if square being dropped on is a valid move                        
        return isValidMove(currentPieceLocation, squareToMove);

        },

        drop: function(event, ui) {

            //UPDATED CODE
            $(ui.draggable).show();
            $(ui.helper).hide();

            //appends img to the valid square / div
            //this appends ok when I inspect the code
            $(ui.draggable).appendTo($(event.target));

            //updates internal board
            //this works fine
            makeMove(currentPieceLocation, squareToMove);                
        }

    });

});