拖放產生不良結果

我一直在體驗我的程序中的一個錯誤，我似乎無法弄清楚。基本上，當我的遊戲開始時，我有一個循環遍歷所有將被拖放的片段。然而，當我實際測試它時，它會定期（並且它看起來像該錯誤取決於哪個元素，我嘗試首先拖動，然後影響那些）之後，我將拖動一個項目，當我嘗試放棄它時，如果我轉到表格的左上角元素並拖動每個元素（從左到右），則不會發生放置事件，但最終可以拖放所有塊，但只能按特定順序拖放。我一直在努力解決這個問題，但已經沒有想法了。這裏是一個現場演示的問題，它開始於我選擇第一個五角大樓時，這不會發生在每場比賽中...... https://www.youtube.com/watch?v=-izy_tuxmdg 拖放產生不良結果

我正在使用的循環是這樣的，它是一個對象的一部分，我在程序啓動時調用：

enablePieces: function() { 
         for(var i = 0; i < this.dragPieces.length; i++) { 
          this.dragPieces[i].ondragstart = this.dragStart; 
          this.targetPieces[i].ondragover = this.allowDrop; 
          this.targetPieces[i].ondrop = this.doDrop; 
         }; 

},

當我調用該方法是這樣的：

Perfection.start = function() { 
    newGame(); 
    *Perfection.view.enablePieces();* 
    Perfection.controls.startButton.onclick = beginGame; 
    Perfection.controls.newButton.onclick = newGame; 
};

我應該提到還有，當我抓住從DOM元素是這樣的：

dragPieces : document.querySelectorAll(".piecetray td img"), 
targetPieces : document.querySelectorAll(".gametray td img"),

，當我鍵入Perfection.view.dragPieces到控制檯我得到：

Perfection.view.dragPieces 
NodeList 
[ <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, 26 more… ]

但如果我創建一個數組var dragArray = [ ];，然後推入「節點列表」中的所有元素融入到這個數組，然後鍵入陣列到控制檯，我得到：

dragArray 
Array [ <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, 26 more… ]

我不認爲有任何兩者之間的區別，但現在我質問自己，它使用我創造它發生少數組的時候，似乎，但那可能只是缺少少一點的測試對方，誰能告訴我爲什麼會發生這種情況？

的拖放功能也被張貼在這裏：

dragStart : function(event) { 
        var piece = event.currentTarget; 
        piece.classList.add("selected"); 
       }, 
allowDrop : function(event) { 
        event.preventDefault(); 
       }, 
doDrop  : function(event) { 
        var bestTime = 0; 
        event.preventDefault(); 
        var currentPiece = document.querySelector(".selected"); 
        var targetPiece = event.currentTarget; 
        var targetParent = targetPiece.parentElement; 
        if (getName(currentPiece) === getName(targetPiece)) { 
         targetParent.appendChild(currentPiece); 
         currentPiece.classList.remove("selected"); 
         currentPiece.classList.add("matched"); 
         matchedCount++; 
        }; 
        if ((matchedCount === 36) && (Perfection.timeLeft !== 0)) 
         if(Perfection.timeLeft > bestTime) { 
          Perfection.view.updateScore("Best time " + timer.innerHTML); 
          bestTime = Perfection.timeLeft; 
          clearInterval(Perfection.timer); 
        };

來源

2015-03-19 coopwatts

任何現場演示？在這種情況下有助於真正看到問題。 – zozo 2015-03-19 05:14:17

@zozo這裏是一個現場演示，當我試圖放棄第一個五角形時，請注意問題的開始。你可以看到，一旦我到達表格的左上角並按順序移動它就會起作用。 https://www.youtube.com/watch?v=-izy_tuxmdg – coopwatts 2015-03-19 05:57:31

我希望在線鏈接能夠調試（代碼沒有明顯的錯誤 - 至少我沒有看到一個）:)。鑑於它發生的隨機事實，我想這可能是一個事件missfire（這只是一個猜測）。你可以在dragStart和doDrop上添加一些日誌嗎？這樣你就可以將問題隔離爲只有一個功能。也請嘗試保持控制檯打開錯誤。不幸的是，用當前的數據無法幫助你。 – zozo 2015-03-19 07:54:21

的問題是該行：

currentPiece.classList.remove（「選擇」）;

因爲它被放置在條件內部，所以只有當它是一個匹配時纔會刪除這個類，但是它應該在每個放置事件中被刪除。

來源

2015-03-23 15:20:18 coopwatts

拖放產生不良結果

回答

相關問題