My application has multiple stones: -> "let dragStone" and one container where one of these stones can be placed: -> "let putCircleNextStoneField"
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?
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 came up with a solution:
function dragFromStoneFieldToNextStoneField() {
let dragStone = document.querySelector("#stoneField").querySelectorAll(".stone");
let putCircleNextStoneField = document.querySelector("#nextStoneField");
let currentStone;
dragStone.forEach(stone => {
stone.classList.add("cursorPointer");
});
dragStone.forEach(stone => {
stone.addEventListener("dragstart", () => {
currentStone = stone;
});
});
putCircleNextStoneField.addEventListener("dragover", e => {
e.preventDefault();
putCircleNextStoneField.classList.add("draggedOver");
putCircleNextStoneField.appendChild(currentStone);
});
putCircleNextStoneField.addEventListener("dragleave", e => {
putCircleNextStoneField.classList.remove("draggedOver");
});
putCircleNextStoneField.addEventListener("drop", e => {
putCircleNextStoneField.classList.remove("draggedOver");
});
}
dragFromStoneFieldToNextStoneField();
I think that referencing the node is better but I'll post here in the case someone in the future need a example of setData and getData:
function receive(event) {
const sourceId = event.dataTransfer.getData("text");
// find the element and clone it
const element = document.getElementById(sourceId).cloneNode(true);
const container = document.querySelector(".target");
container.appendChild(element);
}
function onDrag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}.target {
padding: 12px;
box-sizing: border-box;
border: 1px dashed #2a2;
border-radius: 4px;
}
.container {
margin: 20px 0;
display: flex;
}
.source {
background-color: #f8f8ff;
box-sizing: border-box;
padding: 8px;
margin: 8px;
color: #08c;
}
.source:hover {
background-color: #f0f0ff;
}<div class="target" ondrop="receive(event)" ondragover="allowDrop(event)">
drop here
</div>
<div class="container">
<div id="item-104" class="source" draggable="true" ondragstart="onDrag(event)">
draggable #104
</div>
<div id="item-208" class="source" draggable="true" ondragstart="onDrag(event)">
draggable #208
</div>
<div id="item-37" class="source" draggable="true" ondragstart="onDrag(event)">
draggable #37
</div>
</div>