My application has multiple stones:
-> “let dragStone”
and one container where one of these stones can be placed:
-> “let putCircleNextStoneField”
function dragFromStoneFieldToNextStoneField() {
let dragStone = document.querySelector("#stoneField").querySelectorAll(".stone");
let putCircleNextStoneField = document.querySelector("#nextStoneField");
dragStone.forEach(stone => {
stone.classList.add("cursorPointer");
});
dragStone.forEach(stone => {
stone.addEventListener("dragstart", () => {
});
});
putCircleNextStoneField.addEventListener("dragover", e => {
e.preventDefault();
putCircleNextStoneField.classList.add("draggedOver");
putCircleNextStoneField.appendChild(dragStone); //ERROR IN THIS LINE
});
putCircleNextStoneField.addEventListener("dragleave", e => {
putCircleNextStoneField.classList.remove("draggedOver");
});
putCircleNextStoneField.addEventListener("drop", e => {
putCircleNextStoneField.classList.remove("draggedOver");
});
}
dragFromStoneFieldToNextStoneField();
I want to append the container (parent node) with the stone that is dragged onto it (child node).
The Error code is: “Parameter 1 is not of type ‘Node'”.
I know that the parameter isn’t working beacause the dragStone variable isn’t just a reference to the ID but an array-like object of all child elements which have the CLASS name: “.stone”.
How do I get the reference to the id of the stone that is currently dragged?