JavaScript: Get ID from currently dragged CLASS item-CodePudding

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();

CodePudding user response：

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();

CodePudding user response：

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  ondrop="receive(event)" ondragover="allowDrop(event)">
  drop here
</div>

<div >
  <div id="item-104"  draggable="true" ondragstart="onDrag(event)">
    draggable #104
  </div>
  <div id="item-208"  draggable="true" ondragstart="onDrag(event)">
    draggable #208
  </div>
  <div id="item-37"  draggable="true" ondragstart="onDrag(event)">
    draggable #37
  </div>
</div>