I am creating a question generator with a drag and drop question and I have a problem to check which element is dropped in which drag zone?
I don't honestly know if it's possible with Javascript only or do I need another library because I'm using 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">One way to achieve what you require would be to store the id of the dragged element in the dataTransfer store of the drag event. Then you can use this id to retrieve the element from the DOM when the drop event occurs, something like this:
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" />You can use the id of the element you dragged and the id of the element you dragged into:
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">