Thiết kế website giá rẻ

Question

I want the red pieces’ children to be draggable and droppable onto the grid. Specifically, I want the pieces to be dropped separately. For example, when I drag redPiece5 and drop it onto a grid, not all pieces should go onto a single grid cell. Instead, I want them to be divided separately. When I drag and drop it, the middle piece should go to the place where I drop it, and the two elements should go to the grid pieces before it and the other two pieces should go after it. I also don’t want the pieces dragged one by one in pieces. I want the pieces to add as a child to the grid piece. Later I will replace the pieces with an image.

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Example</title>
  <link rel="stylesheet" href="./styles/main.css">
</head>
<body>


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

  <script src="./scripts/main.js"></script>

</body>
</html>

main.css :

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

main.js :

// 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');

I tried to directly append the child, but all the pieces went into a single grid piece.

Thiết kế website giá rẻ

Danh mục

Childrens of a div separated before dropping in the grid