Начал изучать как реализовать Drag and Drop на сайте. Создал тестовый файл и сразу же столкнулся с проблемой, когда всё говорит о том, что это должно работать, но оно не работает (должно вывести сообщение в консоли). HTML CSS и Js код прилагаю. Подскажите что может быть не так?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<ul class="tasks__list">
<li class="draggable" draggable="true">learn HTML</li>
<li class="draggable" draggable="true">learn CSS</li>
<li class="draggable" draggable="true">learn JavaScript</li>
</ul>
<div class="ans-s">
<div class="answer"></div>
<div class="answer"></div>
<div class="answer"></div>
</div>
</body>
</html>
CSS (просто чтобыб был, в этом вопросе он роли не играет):
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
.tasks__list,
.ans-s{
top: 50px;
position: absolute;
width: 500px;
height: 700px;
border: 5px solid black;
display: inline-block;
}
.ans-s{
right: 150px;
}
.tasks__list{
left: 150px;
}
.answer,
.draggable{
width: 400px;
height: 100px;
margin-top: 80px;
border: 5px solid black;
margin-left: 45px;
}
.answer{
background-color: forestgreen;
}
.draggable{
background-color: crimson;
}
.selected{
background-color: aqua;
}
И Js, в котором скорее всего и проблема:
const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".tasks__list");
draggables.forEach((draggable) => {
draggable.addEventListener("dragstart", () => {
console.log("Dragging !!! Wow");
});
});