Перетаскиваемые элементы исчезают/не перемещаются при попытке их переместить. ⇐ CSS

[Anonymous]

Я пытаюсь создать сетку 3x3, каждый из элементов которой является частью 1 изображения. Я хочу, чтобы эти элементы можно было перетаскивать в другую сетку 3x3.(В любом порядке).
Я столкнулся с проблемой и уже некоторое время пытаюсь ее решить.
Дерево каталогов:

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

.
├── Project/
│   └── Res/
│       ├── Media/
│       │   └── Images/
│       │       └── image.jpg
│       ├── Scripts/
│       │   └── anim3.js
│       ├── Styles/
│       │   └── anim3.css
│       └── Pages/
│           └── animPage3.html
└── index.html(not relevant)

animPage3.html:

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

...There's a total of 9 these...

anim3.css:

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

.grid-cont {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.draggable-grid, .droppable-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-image: url('../Media/Images/image.jpg');
background-size: 300% 300%;
}
.droppable-box {
border: 2px dashed #ccc;
height: 100px;
}

anim3.js:

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

const draggableBoxes = document.querySelectorAll('.draggable-grid .box');
const droppableBoxes = document.querySelectorAll('.droppable-grid .droppable-box');
draggableBoxes.forEach(box => {
box.addEventListener('dragstart', dragStart);
});
droppableBoxes.forEach(droppableBox => {
droppableBox.addEventListener('dragover', dragOver);
droppableBox.addEventListener('dragenter', dragEnter);
droppableBox.addEventListener('dragleave', dragLeave);
droppableBox.addEventListener('drop', drop);
});
let draggedItem = null;
function dragStart() {
draggedItem = this;
setTimeout(() => this.style.display = 'none', 0);
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
this.classList.add('hovered');
}
function dragLeave() {
this.classList.remove('hovered');
}
function drop() {
this.classList.remove('hovered');
this.append(draggedItem);
draggedItem.style.display = 'block';
draggedItem = null;
}

Я пытался прокомментировать

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

//setTimeout(() => this.style.display = 'none', 0);

Что не помогло перетаскиванию.
Что я хочу от кода:
Создать две сетки 3×3.
1-я сетка содержит перетаскиваемые элементы, а каждый фон элементов является частью "1 изображения*.
"2-го сетка* — это то место, где я хочу иметь возможность отбрасывать элементы в любой из 9 ящиков.

Подробнее здесь: https://stackoverflow.com/questions/783 ... -move-them