div 的子级在放入网格之前分开

Question

我希望红色棋子的子元素可以拖放到网格上。具体来说，我希望将这些碎片分开丢弃。例如，当我拖动 redPiece5 并将其放到网格上时，并非所有片段都应该放入单个网格单元中。相反，我希望将它们分开。当我拖放它时，中间的部分应该转到我放置它的位置，两个元素应该转到它之前的网格部分，另外两个元素应该转到它之后。我也不希望碎片被一件一件拖成碎片。我希望这些片段作为子元素添加到网格片段中。稍后我会用图像替换这些碎片。

// Function to create grid
function createGrid(containerId, numRows, numCols, colorClass) {
  const gridContainer = document.getElementById(containerId);
  for (let i = 0; i < numRows; i++) {
    const row = document.createElement('div');
    row.classList.add('row');
    for (let j = 0; j < numCols; j++) {
      const square = document.createElement('div');
      square.classList.add('square', colorClass);
      row.appendChild(square);
    }
    gridContainer.appendChild(row);
  }
}

// Define the number of rows and columns
const rows = 7;
const columns = 9;

// Create red grid
createGrid('redGrid', rows, columns, 'red');

// Create blue grid
createGrid('blueGrid', rows, columns, 'blue');

// // Create green grid
// createGrid('greenGrid', rows, columns, 'green');

// // Create yellow grid
// createGrid('yellowGrid', rows, columns, 'yellow');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.colourContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.piecesBox {
  width: 210px;
  height: 210px;
  border: 1px dashed black;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 10px;
}

.row {
  display: flex;
  gap: 3px;
}

.square {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}

.red {
  background-color: crimson;
}

.blue {
  background-color: royalblue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: rgb(241, 241, 14);
}

#greenPieces,
#yellowPieces {
  display: none;
}

.lightcoral {
  background-color: lightcoral;
}

.piecesBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 15px;
}

.redPieceses {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 5px;
  margin-block: 2px;
}

.bluePieceses {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 5px;
  margin-block: 2px;
}

.pieceses {
  margin-right: 3px;
}

#redPiece5 {
  order: 4;
}

#redPiece4 {
  order: 5;
}

#redPiece3-1 {
  order: 2;
}

#redPiece3-2 {
  order: 3;
}

#redPiece2 {
  order: 1;
}

#bluePiece5 {
  order: 4;
}

#bluePiece4 {
  order: 5;
}

#bluePiece3-1 {
  order: 2;
}

#bluePiece3-2 {
  order: 3;
}

#bluePiece2 {
  order: 1;
}

<div id="wrapper">
  <div class="gridContainer">
    <div id="redContainer" class="colourContainer">
      <div id="redPieces" class="piecesBox">
        <div id="redPiece5" class="redPieceses" draggable="true">
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
        </div>
        <div id="redPiece4" class="redPieceses" draggable="true">
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
        </div>
        <div id="redPiece3-1" class="redPieceses" draggable="true">
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
        </div>
        <div id="redPiece3-2" class="redPieceses" draggable="true">
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
        </div>
        <div id="redPiece2" class="redPieceses" draggable="true">
          <div class="square lightcoral pieceses"></div>
          <div class="square lightcoral pieceses"></div>
        </div>
      </div>
      <div class="grid" id="redGrid"></div>
    </div>
    <div id="blueContainer" class="colourContainer">
      <div class="grid" id="blueGrid"></div>
      <div id="bluePieces" class="piecesBox">
        <div id="bluePiece5" class="bluePieceses" draggable="true">
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
        </div>
        <div id="bluePiece4" class="bluePieceses" draggable="true">
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
        </div>
        <div id="bluePiece3-1" class="bluePieceses" draggable="true">
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
        </div>
        <div id="bluePiece3-2" class="bluePieceses" draggable="true">
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
        </div>
        <div id="bluePiece2" class="bluePieceses" draggable="true">
          <div class="square blue pieceses"></div>
          <div class="square blue pieceses"></div>
        </div>
      </div>
    </div>
    <!-- <div class="grid" id="greenGrid"></div>
      <div class="grid" id="yellowGrid"></div> -->
  </div>
</div>

我尝试直接附加子项，但所有部分都进入一个网格部分。

Answer 1

为了实现将每个可拖动片段单独放到网格上的所需行为，您可以利用 HTML 拖放 API 以及一些 JavaScript 来处理拖放事件。

使用此代码，每个可拖动的块将单独放置到网格上，其子方块分布在相邻的网格方块上。根据需要调整 CSS 以确保正确的样式和布局。