拖拽交互出现幽灵元素问题求助

问题现象 #

• 拖拽元素时，偶尔会出现额外的幽灵元素被一同拖拽的情况。该问题较难复现，但按以下操作可提高触发概率：将4-5个元素拖拽至顶部行，在这些元素之间横向交换位置，直至异常出现。
• 这并非单纯视觉错误：不带draggable=true属性的区域也会变为可拖拽状态，导致放置区域及周边、下方元素被一同拖拽；幽灵元素被拖拽至空白区域后，对应字段会被null值填充。
• 已找到可靠复现步骤：
  1. 点击文档<body>的任意位置
  2. 按下Ctrl+A
  3. 尝试拖拽任意项
     推测部分元素被标记为选中，但无视觉反馈。

技术实现与排查细节 #

• 脚本基于dragstart、dragover、drop事件实现，核心功能：
  1. 触发drop事件时发送JSON字符串化的负载
  2. 将.container设置为唯一允许的放置区域
  3. 当.container接收到负载时执行后续逻辑
• 元素放置后，脚本会判断其来源：是下方的可克隆模板栏，还是顶部栏内的元素位置交换（如槽位2与槽位7的元素互换）。
• 异常发生时，控制台打印的数据类型数组为：Array(4) [ "text/_moz_htmlcontext", "text/_moz_htmlinfo", "text/html", "text/plain" ]，其中text/plain为正常负载，其余为莫名附加的数据类型。
• 曾尝试在dragstart回调函数顶部添加e.dataTransfer.clearData();消除冗余数据，但未解决问题；将带有额外幽灵元素的项拖拽至控制台输入框时，有时会粘贴出换行符+正常负载，怀疑附带了空格或其他文本元素。
• 制作了仅保留dragstart事件的简化版本，多次从下方栏点击顶部栏后，同样会出现幽灵元素、多个项同时移动、.container出现空白槽位的问题。

内容的提问来源于stack exchange，提问作者user21273012