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");
if (ev.target.hasChildNodes()) {
alert("This already contains a image");
}
else
{
ev.target.appendChild(document.getElementById(data));
}
}<!DOCTYPE html><html><head><title>PUZZLE</title><link rel="stylesheet" href="puzzletest.css"><script type="text/javascript" src="puzzletest.js"></script></head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69"></div><img id="drag1" src="puzzle01.jpeg" draggable="true"ondragstart="drag(event)" width="336" height="69"></body></html>Current HTML
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<img id="drag1" src="puzzle01.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
How can I check if the division already contains an image and if it does it should replace the image with the draggable image or print an alert?
As you can see if I put one Image to the other one disappears try it out