Как мне заставить куски двигаться? Этот код создает 5 досок для шашек, но мне интересно, как заставить куски двигаться?

Question

Я хочу, чтобы мои фигуры двигались, но не могу заставить их двигаться. Пожалуйста, помогите, как бы я это сделал? Я хочу, чтобы фигуры, которые были svg, могли перемещаться по всей доске шашек, ДВИЖЕНИЕ НЕ ИМЕЕТ ДЕЙСТВИТЕЛЬНОГО ДВИЖЕНИЯ. На данный момент, я просто хочу заставить его двигаться! Пожалуйста помоги. Части не должны go вне доски.

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;
}

Answer 1

Из того, что я понимаю, вам нужен эффект перетаскивания для каждой части. Если это так, вы должны go с 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>