JQuery UI 拖放的奇怪行为

Question

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

$(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（都有一个方形类），它们是用 img 为 div 内的片段创建的。我对移动验证没有任何问题（ isValidMove() 工作正常），但是，当我将棋子向上移动到前面的下一个格子时，棋子想要跳上两个格子。不，它与第一个典当动作无关。我出于测试目的禁用了它。现在有趣的是，由于我将 Revert 设置为“true”而不是“invalid”，所以在我放下棋子后，棋子会尝试向上移动到前面的第二个方格，然后滑回我最初放下它的位置，因此它应该在哪里。显然，这可能是由于发生了附加。如果我将 Revert 更改为“无效”，那么当我放下它后，pawn 就会跳到前面的第二个格子并停留在那里。尽管我可以将 Revert 设置为“true”，但显然我们不希望看到 pawn 尝试向上滑动然后回到它应该在的位置。

我有一种感觉，问题是因为每个 div 都有一个方形类，当我点击一个片段来移动片段/img 时，由于起始位置 div 有一个方形类，所以正在调用 isValidMove()。我猜这可能会在我没有意识到的情况下以某种方式添加额外的移动......我的印象是只有当我“DROP”/释放鼠标按钮时才会调用 isValidMove() 而不是当我只需单击包含类正方形的 div 内的 img。正如我所说，我对 JQuery UI 没有经验，所以我显然对可拖动和可放置如何协同工作有某种误解。我见过与这个问题类似的问题，但是，没有一个是完全相同的。任何帮助都会很棒！

Answer 1

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

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

    });

});

截至目前，我已经删除了任何指向工作演示的链接。如果有人想真正了解功能问题是什么，请留言，我会备份一个链接。