Перетаскивать обмен в картах не работает ⇐ Javascript

[Anonymous]

Вот мой код, и я пытаюсь перетащить .card (что включает изображение), бросить его на другой. Но этого не происходит, а также не получает никакой ошибки на консоли. Может ли кто-нибудь помочь, в чем проблема, и помочь мне в отладке.

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

 const cards = document.querySelectorAll('.card');
let dragSource = null;

cards.forEach(card => {
card.addEventListener('dragstart', handleDragStart);
card.addEventListener('dragover', handleDragOver);
card.addEventListener('dragenter', handleDragEnter);
card.addEventListener('dragleave', handleDragLeave);
card.addEventListener('drop', handleDrop);
card.addEventListener('dragend', handleDragEnd);
});

function handleDragStart(event) {
dragSource = event.target;
event.target.classList.add('dragging');
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', event.target.innerHTML);
}

function handleDragOver(event) {
console.log("here handle dragover")
event.preventDefault();  // Allow drop
event.dataTransfer.dropEffect = 'move';
}

function handleDragEnter(event) {
event.preventDefault();
event.target.classList.add('over');
}

function handleDragLeave(event) {
event.target.classList.remove('over');
}

function handleDrop(event) {
event.preventDefault();
if (dragSource !== event.target) {
console.log("here dragsource")
let sourceHTML = dragSource.innerHTML;
dragSource.innerHTML = event.target.innerHTML;
event.target.innerHTML = sourceHTML;
}
event.target.classList.remove('over');
}

function handleDragEnd(event) {
cards.forEach(card =>  {
card.classList.remove('dragging', 'over');
});
}< /code>
    body {
font-family: 'Segoe UI', sans-serif;
background: #fff;
margin: 0;
padding: 2rem;
text-align: center;
}

h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}

.card-layout {
display: flex;
justify-content: center;
gap: 24px;
max-width: 900px;
margin: 0 auto;
}

.columns {
display: flex;
flex-direction: column;
gap: 24px;
flex: 1;
max-width: 400px;
}

.card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
}

.card img {
width: 100%;
object-fit: cover;
display: block;
}

.short img {
height: 212px;
}

.tall img {
height: 424px;
}

.label {
position: absolute;
bottom: -10px;
left: 12px;
right: 12px;
background: white;
padding: 10px 14px;
border-radius: 12px;
font-size: 0.95rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
.card-layout {
flex-direction: column;
align-items: center;
}

.columns {
width: 100%;
max-width: none;
}
}

.container {
position: relative;
}< /code>



[img]https://th.bing.com/th/id/OSK.lfza5rzxC7_2q_NiBAs7eOFy_tlKtYXE7_MlbLg5w-c?w=312&h=200&c=10&pid=placeholderpartnerid&rm=2[/img]

[img]https://th.bing.com/th/id/OSK.xdZQLhtExuYJ2ifeEPTU27ZtSZqmI6x9yrTaxDYXJFM?w=312&h=200&c=10&pid=placeholderpartnerid&rm=2[/img]

[img]https://th.bing.com/th/id/OSK.9TAX6CjlBCGryO5ezgflDgvd6E2ZxHwvyLKth2QlNN8?w=312&h=424&c=10&pid=placeholderpartnerid&rm=2[/img]




[img]https://th.bing.com/th/id/OSK.QjOLP9EnwvAP8GGBUdti0W499AX1NUXm--uWCOYpDMg?w=312&h=424&c=10&pid=placeholderpartnerid&rm=2[/img]

[img]https://th.bing.com/th/id/OSK.xdZQLhtExuYJ2ifeEPTU27ZtSZqmI6x9yrTaxDYXJFM?w=312&h=200&c=10&pid=placeholderpartnerid&rm=2[/img]

[img]https://th.bing.com/th/id/OSK.xdZQLhtExuYJ2ifeEPTU27ZtSZqmI6x9yrTaxDYXJFM?w=312&h=200&c=10&pid=placeholderpartnerid&rm=2[/img]

Подробнее здесь: https://stackoverflow.com/questions/795 ... ot-working