javascript - JQuery UI 拖放的奇怪行为

Question

请原谅我缺乏使用 JQuery UI 的经验，但是，我正在用 JavaScript 开发一个基于 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(都有一个 square 类)，它们是用 img 创建的，用于 div 内的各个部分。我对移动验证没有问题( isValidMove() 工作正常)，但是，当我将棋子移动到前面的下一个方格时，棋子想要跳上两个方格。不，这与第一个棋子移动无关。我出于测试目的禁用了它。现在有趣的是，由于我将“恢复”设置为“true”而不是“invalid”，因此在我放下棋子后，棋子会尝试向上移动到前面的第二个方 block ，然后滑回到我最初放下它的位置，因此它应该在哪里。显然，这可能是由于附加的发生。如果我将“恢复”更改为“无效”，那么棋子只会跳到前面的第二个方格，并在我放下它后停留在那里。尽管我可以将“恢复”设置为“true”，但显然我们不希望看到 pawn 尝试向上滑动，然后移回到它应该在的位置。

我有一种感觉，问题是因为每个 div 都有一个 square 类，当我单击一个棋子来移动该棋子/img 时，由于起始位置 div 有一个 square 类， isValidMove() 被调用。我猜这可能会在我没有意识到的情况下以某种方式添加额外的移动...我的印象是，只有当我“放下”/在可放下的方 block 上释放鼠标按钮时，才会调用 isValidMove() ，而不是当我只需单击包含类方 block 的 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);                
        }

    });

});

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