Buen día chic@s, estoy haciendo un ejercicio de drag and drop sobre canecas de reciclaje. He puesto 3 canecas y 3 residuos, y logro que los residuos entren en cada caneca. El problema es que no sé de qué manera mostrar por pantalla los siguientes mensajes: "Residuo correcto" (en caso de que el residuo que se arrastre y pertenezca a esa caneca), "Residuo incorrecto" (en caso de que no pertenezca).
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));
}
<center><h1> Arrastrar y soltar </h1></center>
<center class="caneca">
<div>
<p> Caneca azul </p>
<div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="imagenes/azul.png" width="100px" height="90px">
</div>
</div>
<div>
<p> Caneca verde </p>
<div class="img" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="imagenes/verde.png" width="100px" height="90px">
</div>
</div>
<div>
<p> Caneca gris </p>
<div class="img" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="imagenes/gris.png" width="100px" height="90px">
</div>
</div>
</center>
<br /> <br />
<center><div id="x">
<img src="imagenes/botella.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="70">
</div>
<div id="y">
<img src="imagenes/carton.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="70">
</div>
<div id="z">
<img src="imagenes/aluminio.png" draggable="true" ondragstart="drag(event)" id="drag3" width="88" height="70">