如何使用if/else语句编写javascript函数来检查a<；部门>；类包含一个<；img>；或<；img>；班

我正试图利用拖放功能制作一个网页。该页面旨在让用户将图像（我创建了两个类，一个称为“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

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

以下是指向此项目的我的代码笔的链接：

---

任何帮助都将不胜感激：）

这里的第一个问题是

ev.target.appendChild

将图像作为子对象添加到第一次拖放的

div

中，并将其附加到第二次拖放的

img

标记中，在随后的每次拖放中创建更深的嵌套关系。这可以通过该函数中的

console.log（ev.target）

观察到

因此，一种方法是首先确保我们附加到的节点是div，然后我们的条件将检查该div是否已经有任何子节点。我还简化了事件侦听器。以下是一个例子：

//当可拖动的p元素进入droptarget时，更改div的边框样式
文件.附录列表器（“绘图器”，功能（事件）{
if（event.target.className==“dropbox”| | event.target.className==“dropbox2”）{
event.target.style.border=“3px点红色”；
}
});
//当可拖动的p元素离开droptarget时，重置div的边框样式
文件。添加事件列表器（“dragleave”，函数（事件）{
if（event.target.className==“dropbox”| | event.target.className==“dropbox2”）{
event.target.style.border=“”；
}
});
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
常量元素=ev.target.tagName=='DIV'？ev.target:ev.target.parentNode
if（！element.children.length）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
}

正文{
背景图像：url（'https://drive.google.com/uc?export=view&id=1EcpUOWcgSSuAsFv0GbbSRcMtaOH-UY8q'）；
背景重复：无重复；
}
.升降箱{
位置：绝对位置；
浮动：；
宽度：200px；
高度：200px；
边框：2件黑色虚线
}
.dropbox2{
位置：绝对位置；
浮动：；
宽度：229px；
高度：80px；
边框：2件黑色虚线
}
.帆船{
转化：translateY（-5%）；
}
#第一组{
保证金：69px 354px；
}
#第二组{
利润率：69px 620px；
}
#第三组{
利润率：65px 887px；
}
#第四组{
利润率：65像素1150像素；
}
#第五组{
保证金：367px 333px；
}
#第六组{
保证金：367px 600px；
}
#第7课{
保证金：362px879px；
}
#第8课{
保证金：363px1150px；
}
#第9课{
保证金：283px333px；
}
#第10课{
保证金：283px599px；
}
#第11课{
保证金：279px 866px；
}
#第12课{
保证金：279px 1129px；
}
#第13课{
保证金：581px 312px；
}
#第14课{
保证金：581px579px；
}
#第15课{
保证金：576px 858px；
}
#第16课{
保证金：577px 1129px；
}
#drag3{
转化：translateY（-54%）；
}

---

这里的第一个问题是，

ev.target.appendChild

将图像作为子对象添加到第一次拖放的

div

，并将其附加到第二次拖放的

img

标记，在随后的每次拖放中创建更深的嵌套关系。这可以通过该函数中的

console.log（ev.target）

观察到

因此，一种方法是首先确保我们附加到的节点是div，然后我们的条件将检查该div是否已经有任何子节点。我还简化了事件侦听器。以下是一个例子：

//当可拖动的p元素进入droptarget时，更改div的边框样式
文件.附录列表器（“绘图器”，功能（事件）{
if（event.target.className==“dropbox”| | event.target.className==“dropbox2”）{
event.target.style.border=“3px点红色”；
}
});
//当可拖动的p元素离开droptarget时，重置div的边框样式
文件。添加事件列表器（“dragleave”，函数（事件）{
if（event.target.className==“dropbox”| | event.target.className==“dropbox2”）{
event.target.style.border=“”；
}
});
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
常量元素=ev.target.tagName=='DIV'？ev.target:ev.target.parentNode
if（！element.children.length）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
}

正文{
背景图像：url（'https://drive.google.com/uc?export=view&id=1EcpUOWcgSSuAsFv0GbbSRcMtaOH-UY8q'）；
背景重复：无重复；
}
.升降箱{
位置：绝对位置；
浮动：；
宽度：200px；
高度：200px；
边框：2件黑色虚线
}
.dropbox2{
位置：绝对位置；
浮动：；
宽度：229px；
高度：80px；
边框：2件黑色虚线
}
.帆船{
转化：translateY（-5%）；
}
#第一组{
保证金：69px 354px；
}
#第二组{
利润率：69px 620px；
}
#第三组{
利润率：65px 887px；
}
#第四组{
利润率：65像素1150像素；
}
#div