How can I write a javascript function with the if/else statement to check whether a class contains a or class

Im trying to make a web page utilizing the drag and drop feature. The page is meant for the user to drag an image (I made two classes, one called "sails" and the other "boats") to a div (class named "dropbox" and "dropbox2").

The problem I'm having is that if a user drops an image into a droppable div that already contains an image, one of the images disappears and can't be recovered.

To solve this problem I believe I need to create a function using the if/else statement to check whether the div contains an image. If it does then I want the drag and drop feature to keep its default setting so that it doesn't drop into the div and disappear from the user. Else, it executes the code I already have that turns the default nature off so that it can drop into the div.

if (**div contains an img**) {
  **keep the default nature so that it doesn't drop into the div**
} else {
  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
}

How can I word the condition so that I can check whether or not the div contains the image and how can I word the block of code to NOT allow the image to drop into that div if the condition is true?

or am I attacking this problem the wrong way? It seems logical to me but I am not experienced.

Here is a link to my codepen for this project:

https://codepen.io/Pacman0006/pen/vYEWppe

Any help would be greatly appreciated :)