Javascript 无法将图像拖放到JS中的另一个图像上？

我正在用JS编写一个代码，在另一个图像上执行拖放操作。但是我没有得到想要的结果。在放下图像时，图像突然消失。我已经提到了前面的问题，但没有找到有用的答案。有人帮我理解这个问题

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

试试这个

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

#div1，#div2{
浮动：左；
宽度：100px；
高度：35px；
利润率：10px；
填充：10px；
边框：1px纯黑；
}

---

事件。target返回最高的元素，即案例中的

img

元素。因此，所发生的事情是将拖动的图像附加到第二个图像中，而不是像预期的那样附加到div中

您可以做的是将元素作为函数的第二个参数传递给drop，以确保将其放入所需的容器中，而不是某个子元素中

像这样：

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
控制台日志（ev.target.id）；
}
功能下降（电动汽车，电动汽车）{
控制台日志（ev）；
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
el.appendChild（document.getElementById（数据））；
}