Estoy creando un generador de preguntas con una pregunta de arrastrar y soltar y tengo un problema para verificar qué elemento se suelta en qué zona de arrastre.
Honestamente, no sé si es posible solo con Javascript o si necesito otra biblioteca porque estoy usando Vanilla JS.
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } <p>Drag the image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="http://localhost/source1.png" draggable="true" ondragstart="drag(event)" width="336" height="69">Una forma de lograr lo que necesita sería almacenar la id del elemento arrastrado en el almacén de dataTransfer de datos del evento de arrastre. Luego puede usar esta id para recuperar el elemento del DOM cuando ocurre el evento de drop , algo como esto:
document.querySelectorAll('.draggable-entity').forEach(el => el.addEventListener('dragstart', drag)); document.querySelector('#div1').addEventListener('drop', drop); document.querySelector('#div1').addEventListener('dragover', allowDrop); function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("draggedElementId", ev.target.id); } function drop(ev) { ev.preventDefault(); var draggedElementId = ev.dataTransfer.getData("draggedElementId"); var draggedElement = document.querySelector('#' + draggedElementId); ev.target.appendChild(draggedElement); console.log(draggedElement.id); } #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } img.draggable-entity { width: 50px; height: 50px; } <small>Drag the image into the rectangle:</small> <div id="div1"></div> <br /> <img id="drag1" class="draggable-entity" src="http://localhost/source1.png" draggable="true" title="1" /> <img id="drag2" class="draggable-entity" src="http://localhost/source1.png" draggable="true" title="2" /> <img id="drag3" class="draggable-entity" src="http://localhost/source1.png" draggable="true" title="3" /> <img id="drag4" class="draggable-entity" src="http://localhost/source1.png" draggable="true" title="4" /> <img id="drag5" class="draggable-entity" src="http://localhost/source1.png" draggable="true" title="5" />Puede usar la id del elemento que arrastró y la identificación del elemento que arrastró a:
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); const data = ev.dataTransfer.getData("text"); const element = document.getElementById(data); ev.target.appendChild(element); console.log(`${data} in ${ev.target.id}`); } const draggables = document.querySelectorAll(".dragitem"); draggables.forEach(draggable => { draggable.addEventListener("dragstart", drag); }); const div1 = document.querySelector("#div1"); const div2 = document.querySelector("#div2"); [div1, div2].forEach(div => { div.addEventListener("dragover", allowDrop); div.addEventListener("drop", drop); }); #div1, #div2 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } <p>Drag the image into the rectangle:</p> <div id="div1"></div> <div id="div2"></div> <img class="dragitem" id="drag1" src="http://localhost/source1.png" draggable="true"> <img class="dragitem" id="drag2" src="http://localhost/source1.png" draggable="true"> <img class="dragitem" id="drag3" src="http://localhost/source1.png" draggable="true"> <img class="dragitem" id="drag4" src="http://localhost/source1.png" draggable="true"> <img class="dragitem" id="drag5" src="http://localhost/source1.png" draggable="true">