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（都有一个方形类）用img创建了div中的碎片。我对移动验证没有问题（isValidMove（）工作正常），然而，当我将一个棋子移动到前面的下一个方格时，pawn想要跳起两个方块。并没有与第一次典当行动无关。为了测试目的，我禁用了它。现在有趣的是，因为我将Revert设置为＆＃34; true＆＃34;在我放下pawn之后，pawn尝试向上移动到前面的第二个方块，然后滑回到我最初丢弃它的位置，因此它应该在哪里。而不是＆＃34;无效＆＃34;显然这可能是由于附加发生。如果我将Revert更改为＆＃34;无效＆＃34;，那么pawn将跳到前面的第二个方块并在我放下之后停留在那里。即使我可以将Revert设置为＆＃34; true＆＃34;，显然我们不希望看到pawn尝试并向上滑动然后再回到它应该的位置。

我有一种感觉，问题是因为每个div都有一个方形类，当我点击一块来移动一块/ img时，isValidMove（）被调用，因为起始位置div有一个方形类。我猜这可能会在某种程度上添加额外的移动，而我却没有意识到这一点......我的印象是只有在我＆＃34; DROP＆＃34;时才会调用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);                
        }

    });

});

截至目前，我已删除了工作演示的任何链接。如果有人想要实际看到功能问题是什么，只需留言，我会重新建立一个链接。

使用JQuery UI拖放的奇怪行为

1 个答案: