javascript - 如何使用 if/else 语句编写 JavaScript 函数来检查 <div> 类是否包含 <img> 或 <img> 类

Question

我正在尝试利用拖放功能制作一个网页。该页面供用户将图像(我创建了两个类，一个称为“sails”，另一个称为“boats”)拖动到 div(类名为“dropbox”和“dropbox2”)。

我遇到的问题是，如果用户将图像放入已包含图像的可放置 div 中，则其中一个图像会消失并且无法恢复。

为了解决这个问题，我相信我需要使用 if/else 语句创建一个函数来检查 div 是否包含图像。如果是这样，那么我希望拖放功能保持其默认设置，这样它就不会落入 div 中并从用户那里消失。否则，它会执行我已有的代码，关闭默认性质，以便它可以放入 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));
}
}

如何编写条件以便检查 div 是否包含图像，以及如何编写代码块以在条件为真时不允许图像放入该 div 中？

或者我是否以错误的方式解决这个问题？这对我来说似乎合乎逻辑，但我没有经验。

这是我针对该项目的 codepen 的链接:

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

任何帮助将不胜感激:)

Answer 1

您需要在 drop 函数本身中写入您的条件。

您可以这样做:

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    // check if the target container has an image already
    var targetHasImage = ev.target.querySelector('img');

    // check if the target container is not an image
    var targetIsImage = ev.target.tagName === 'IMG'

    // add the image if the target does not have an image and is not an image itself
    if (!targetHasImage && !targetIsImage) {
        ev.target.appendChild(document.getElementById(data));
    }
}