Дочерние элементы div разделены перед попаданием в сетку ⇐ CSS

[Anonymous]

Я хочу, чтобы дочерние элементы красных фигур можно было перетаскивать на сетку. В частности, я хочу, чтобы части отбрасывались отдельно. Например, когда я перетаскиваю 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;
}

Код: Выделить всё

Я пытался напрямую добавить дочерний элемент, но все его части превратились в один кусок сетки.

Подробнее здесь: https://stackoverflow.com/questions/784 ... n-the-grid