React dnd - 棋盘教程示例问题

我想让骑士可以移动到任何方格（不遵循游戏规则）。所以我改变了函数：文件 Game.js 中的 canMoveKnight 像这样：

canMoveKnight(toX,toY) {
    return true;  
}

结果是：骑士根本无法移动。

但是如果我将函数更改为：

canMoveKnight(toX,toY) {
    const [x,y] = this.knightPosition
    return (x !== toX || y !== toY)
}

基本上，只排除骑士位置。在其他方格中仍然返回 TRUE。它有效。

任何人都可以帮助解释为什么对于所有不工作的方块都返回 TRUE？

幸运的是，我认为有人在关闭之前回答了这个问题。

我尝试了答案。通过将 zIndex 添加到 Knight，它确实有效。

如果没有 zIndex，BoardSquare 会捕获鼠标事件，并且 BoardSquare 不可拖动。

这是你遇到的一个奇怪的问题！我也很想听听其他人对此的回答，因为我仍然对问题的原因很好奇。不过我确实为您找到了解决方案！

如果骑士棋子在同样有效的棋子上，它似乎以某种方式被阻止被点击。（如果有人能弄清楚原因，请分享）

要解决此问题，您可以向骑士添加 position: absolute 以及 z-index: <value>。这使得骑士 div 出现在其他一切之上，因此它仍然是可拖动的。

具体来说，您可以将 knightStyle 中的 Knight.jsx 更改为：

const knightStyle = {
    fontSize: 40,fontWeight: 'bold',cursor: 'move',position: 'absolute',zIndex: 50,};