如何让碎片移动？这段代码创建了 5 个棋盘，但我想知道如何让棋子移动？答案

【问题标题】：How do I get the pieces to move? This code creates 5 checker boards, but I m wondering how to get the pieces to move?如何让碎片移动？这段代码创建了 5 个棋盘，但我想知道如何让棋子移动？
【发布时间】：2020-06-20 20:08:45
【问题描述】：

我想让我的棋子移动，但无法移动。请帮助我将如何完成它？我想要一个 svg 的棋子，能够在整个棋盘上移动，移动不需要有效的移动。在这一点上，我只想让它动起来！请帮忙。棋子不应超出棋盘。

const board1 = `-W-W-W-W-W
    W-W-W-W-W-
    -W-W-W-W-W
    W-W-W-W-W-
    ----------
    ----------
    -B-B-B-B-B
    B-B-B-B-B-
    -B-B-B-B-B
    B-B-B-B-B-`;

const board3 = `-W-W-W-W-W
    W-W-W-W-W-
    -W-W-W-W-W
    W-W-W---W-
    -------W--
    ------B---
    -B-B---B-B
    B-B-B-B-B-
    -B-B-B-B-B
    B-B-B-B-B-`;

const board2 = `-W-W-W-W-W
    W-W-W-W-W-
    -W-W-W-W-W
    W-W-W-W---
    ---------W
    --B-------
    -B---B-B-B
    B-B-B-B-B-
    -B-B-B-B-B
    B-B-B-B-B-`;

const board4 = `-W-W-W-W-W
    W-W-W-W-W-
    -W-W-W-W-W
    W-W-----W-
    ---W-W----
    ----B-B---
    -B-----B-B
    B-B-B-B-B-
    -B-B-B-B-B
    B-B-B-B-B-`;

const board5 = `-W-W-W-W-W
    W-W-W-W-W-
    -W-W-W-W-W
    --W-W-W---
    -W-------W
    B-------B-
    ---B-B-B--
    B-B-B-B-B-
    -B-B-B-B-B
    B-B-B-B-B-`;


function gameConfiguration(boardId, board) {
  //boardLine has become an array of every single row
  var boardLine = board.split("\n");
  //iterator of every single row in boardline
  var y = 0;
  for (const line of boardLine) {
    var x = 0;
    for (const piece of line) {
      if (piece === '-') {
        document.getElementById(`piece_${boardId}_${y}_${x}`).innerHTML = '<svg ><circle cx="50" cy="50" r="15"   class="spaceColor squareColor" /></svg>';
      } else if (piece === 'W') {
        document.getElementById(`piece_${boardId}_${y}_${x}`).innerHTML = '<svg class="editor"><g id="#greenpiece"><circle cx="50" cy="50" r="15"  class="greenPiece" /></g><use uid="3" href="#greenpiece" /></svg>';
        // '<svg ><circle cx="50" cy="50" r="15"  class="greenPiece" /></svg>';
      } else {
        document.getElementById(`piece_${boardId}_${y}_${x}`).innerHTML = '<svg class="editor"><circle cx="50" cy="50" r="15" class="redPiece" /></svg>';
      }
      x++;
    }
    y++;
  }
}

//This function creates the checker board
function createBoard(boardId, size) {
  const createTable = document.createElement('table');
  createTable.id = "checkerBoard";
  const h1 = document.createElement('h1');
  h1.innerHTML = `Checker Board - ${boardId}`;
  createTable.appendChild(h1);
  for (var i = 0; i < size; i++) {
    const col = document.createElement("tr");
    for (var j = 0; j < size; j++) {
      const row = document.createElement("td");
      row.id = `piece_${boardId}_${i}_${j}`;
      row.classList.add("sameRow");
      col.appendChild(row);
    }
    createTable.appendChild(col);
  }
  document.body.appendChild(document.createElement('br'));
  document.body.appendChild(createTable);
}

createBoard('board1', 10);
gameConfiguration('board1', board1);

createBoard('board2', 10);
gameConfiguration('board2', board2);

createBoard('board3', 10);
gameConfiguration('board3', board3);

createBoard('board4', 10);
gameConfiguration('board4', board4);

createBoard('board5', 10);
gameConfiguration('board5', board5);

#checkerBoard {
  width: 1030px;
  height: 1000px;
  margin: 1px;
  border: 2px solid #F44336;
  background: white;
}

.greenPiece {
  stroke-width: 3;
  stroke: black;
  fill: green;
}

.redPiece {
  stroke-width: 3;
  stroke: black;
  fill: red;
}

.spaceColor {
  fill: transparent;
}

.sameRow {
  display: inline;
}

.squareColor {
  background: #b2beb5;
}

svg {
  height: 100;
  width: 100;
}

tr:nth-child(odd) td:nth-child(even) svg {
  background: black;
}

tr:nth-child(even) td:nth-child(odd) svg {
  background: black;
}

【问题讨论】：

我给你做了一个sn-p。请修复控制台错误 - 似乎 boardId 未定义

标签： javascript jquery html css node.js

【解决方案1】：

据我了解，您希望每件作品都具有拖放效果。如果是这种情况，您应该使用HTML Drag and Drop API，您可以在棋子上使用drag 事件，在棋盘方格上使用drop 效果。可以在drop 效果处理程序中应用每件移动的限制（可以使用类名/样式可视化）。让我知道它是否对您有所帮助，或者您是否需要其他帮助。

这是来自 w3schools 的示例：

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1"draggable="true" ondragstart="drag(event)" width="336" height="69">
  drag this text
</div>
</body>
</html>

【讨论】：

感谢您的回复。不要以为你的意思是什么。您能否通过这样做并在此处发布来演示它。
@JineshModi 我在w3schools的回答中添加了一个示例