JavaScript:从当前拖动的CLASS项中获取ID

Question

我的应用程序有多个石头：->quot；让dragStone"以及一个可以放置这些石头之一的容器：->quot；让putCircleNextStoneField"；

我想将拖动到容器(父节点(上的石头附加到容器(子节点(上。错误代码是："；参数1的类型不是"节点"；。

我知道这个参数不起作用，因为dragStone变量不仅仅是对ID的引用，而是所有子元素的类似数组的对象，这些子元素的CLASS名称为"；。石头"；。

如何获得对当前拖动的石头id的引用？

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

Answer 1

我想出了一个解决方案：

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

Answer 2

我认为引用节点更好，但如果将来有人需要setData和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>