JavaScript中拖放功能的问题

我有一个JavaScript拖放代码

我有两个类

div1

用于拖放，而

div2

用于拖放

我已经在CSS中根据

视口
宽度
和
高度
设置了这两个类的
位置
，在这里是必需的

问题是，当我将
div2
拖放到
div1
时，元素不会移动并放置在
div1
中

如何将类
div2
拖动并放置在类
div1
中


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
控制台日志（数据）；
assignedTabName=document.getElementById（数据）.className；
console.log（assignedTabName）；
ev.target.appendChild（document.getElementById（数据））；
}
.div1{
边框：2件纯黑；
位置：绝对位置；
宽度：23vw；
高度：10vh；
左：10vw；
底部：80vh；
}
.第2分部{
边框：2件纯黑；
位置：固定；
宽度：14vw；
高度：12vh；
左：0vw；
底部：60vh；
背景色：#FFFF00；
}



您好
我相信你的div定位规则就是问题所在。如果从
.div1
的CSS中删除
位置：绝对
，从
.div2
的CSS中删除
位置：相对
，则拖放操作似乎可以按预期进行


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
控制台日志（数据）；
assignedTabName=document.getElementById（数据）.className；
console.log（assignedTabName）；
ev.target.appendChild（document.getElementById（数据））；
}
.div1{
边框：2件纯黑；
宽度：23vw；
高度：10vh；
左：10vw；
底部：80vh；
}
.第2分部{
边框：2件纯黑；
宽度：14vw；
高度：12vh；
左：0vw；
底部：60vh；
背景色：#FFFF00；
}



您好