Mi aplicación tiene varias piedras: -> "let dragStone" y un contenedor donde se puede colocar una de estas piedras: -> "let putCircleNextStoneField"
Quiero agregar el contenedor (nodo principal) con la piedra que se arrastra sobre él (nodo secundario). El código de error es: "El parámetro 1 no es del tipo 'Nodo'".
Sé que el parámetro no funciona porque la variable dragStone no es solo una referencia a la ID, sino un objeto similar a una matriz de todos los elementos secundarios que tienen el nombre de CLASE: ".stone".
¿Cómo obtengo la referencia a la identificación de la piedra que se arrastra actualmente?
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();Se me ocurrió una solución:
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();Creo que hacer referencia al nodo es mejor, pero lo publicaré aquí en caso de que alguien en el futuro necesite un ejemplo de setData y 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>