怪異的行爲與jQuery UI拖放

Question

原諒我的缺乏與jQuery UI的經驗，但是，我開發一個JavaScript 2玩家基於web的國際象棋引擎，並已決定擺脫點和點擊，並用去爲非移動用戶提供更多用戶友好的拖放功能。我遇到的問題很可能會對使用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」，但顯然我們不希望看到棋子嘗試並滑動，然後移回原來的位置。

我有一種感覺，問題是因爲每個div都有一個方形的類，當我點擊一塊來移動塊/ img時，isValidMove（）被稱爲由於開始位置div有一個方形類。我猜這可能是某種方式增加額外的舉動沒有我意識到這一點......我的印象是，isValidMove（）將被稱爲只有當我「DROP」 /當我釋放一個投擲的方形鼠標按鈕，而不是隻需點擊包含類廣場的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);     
     } 

    }); 

}); 

截至目前我已刪除任何鏈接到工作演示。如果有人想真正看到什麼功能問題只是留言，我會把鏈接備份。