Javascript 为什么拖放项目时字体大小和div会合并在一起？

最近我正在尝试做一个拖放游戏

比赛快结束了。但是，当我尝试将项目拖放到“drop items Here”时，项目的样式将更改为“drop items Here”，如下所示：

此外，如果我将这些项目放在一起，它们将合并，如下所示：

因为我是初学者，所以代码可能看起来很奇怪。有没有办法避免在删除后将项目和样式合并在一起？多谢各位

函数allowDrop（事件）{
event.preventDefault（）；
}
函数拖动（事件）{
event.dataTransfer.setData（“text”，event.target.id）；
}
函数删除（事件）{
event.preventDefault（）；
var data=event.dataTransfer.getData（“文本”）；
如果（数据==“1”|“2”| 3 | 4）{
event.target.appendChild（document.getElementById（数据））；
}
}

。拖动{
显示器：flex；
柔性流动：柱；
}
.名单{
显示器：flex；
弹性：1；
宽度：100%；
}
.列表.列表{
显示器：flex；
柔性流动：柱；
弹性：1；
利润率：0.15px；
}
.列表.列表.项目{
背景色：#0099ff；
边界半径：8px；
边框：3px实心#0085de；
填充物：5px 5px；
文本对齐：左对齐；
利润率：4px0px；
颜色：白色；
字号：900；
}
.放这里{
文本对齐：居中；
颜色：#d9d9d9；
字号：28px；
}

拖放
将项目放在此处
这是一个
这是b
这是c
这是d
这是f
这是g

在“此处放置项目”框中有一个p页。拉出这个P标签并用CSS设置。检查此代码

函数allowDrop（事件）{
event.preventDefault（）；
}
函数拖动（事件）{
event.dataTransfer.setData（“text”，event.target.id）；
}
函数删除（事件）{
event.preventDefault（）；
var data=event.dataTransfer.getData（“文本”）；
如果（数据==“1”|“2”| 3 | 4）{
event.target.closest（“.drag box output”）.appendChild（document.getElementById（data））；}
}

。拖动{
显示器：flex；
柔性流动：柱；
}
.名单{
显示器：flex；
弹性：1；
宽度：100%；
}
.列表.列表{
显示器：flex；
柔性流动：柱；
弹性：1；
利润率：0.15px；
}
.列表.列表.项目{
背景色：#0099ff；
边界半径：8px；
边框：3px实心#0085de；
填充物：5px 5px；
文本对齐：左对齐；
利润率：4px0px；
颜色：白色；
字号：900；
}
.放这里{
文本对齐：居中；
颜色：#d9d9d9；
字号：28px；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
z指数：-1；
}
/*添加这个CSS*/
.拖动框{
位置：相对位置；
z指数：1；
}
.拖动框输出{
填充顶部：80px；
}

拖放
将项目放在此处
这是一个
这是b
这是c
这是d
这是f
这是g

看起来像是

event.target.appendChild（…）

是问题所在。尝试指定实际的div而不是目标。需要向div添加ID。谢谢您的回答。但是，当我尝试将两个项目放在一起时，两个项目仍然合并在一起。我更新了代码。现在检查一下。