拖放产生不良结果

我一直在体验我的程序中的一个错误，我似乎无法弄清楚。基本上，当我的游戏开始时，我有一个循环遍历所有将被拖放的片段。然而，当我实际测试它时，它会定期（并且它看起来像该错误取决于哪个元素，我尝试首先拖动，然后影响那些）之后，我将拖动一个项目，当我尝试放弃它时，如果我转到表格的左上角元素并拖动每个元素（从左到右），则不会发生放置事件，但最终可以拖放所有块，但只能按特定顺序拖放。我一直在努力解决这个问题，但已经没有想法了。这里是一个现场演示的问题，它开始于我选择第一个五角大楼时，这不会发生在每场比赛中...... 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

拖放产生不良结果

回答

相关问题