在JavaScript中如何将放置到目标区的拖拽项加入数组并在HTML显示

问题原因 #

• totalBalance 数组定义在dropHandler函数内部，每次触发放置事件都会重新初始化为空数组，无法累积历史数据
• 缺少将拖拽获取的data写入数组的逻辑
• 直接输出数组到DOM会默认用逗号拼接，可根据需要调整展示格式

修正后代码 #

// 将数组定义在函数外部，全局保存累积数据
const totalBalance = [];

function dropHandler(ev) {
  ev.preventDefault();
  
  // 获取拖拽传递的text数据
  const data = ev.dataTransfer.getData("text");
  const dropTarget = document.getElementById('drop-target');
  
  ev.target.appendChild(document.getElementById(data));
  
  // 更改放置区域背景色
  ev.currentTarget.style.background = "black";
  
  // 将当前拖拽项数据加入数组
  totalBalance.push(data);
  
  const totalText = document.getElementById('totalText');
  // 如果需要自定义展示格式可以在这里修改，比如用换行、顿号分隔等
  totalText.innerHTML = totalBalance.join('、');
}

补充说明 #

• 如果你需要限制同一个元素只能被计入一次，可以在push前加判断：if(!totalBalance.includes(data)) totalBalance.push(data)
• 如果你需要在移除拖拽元素时同步删除数组内对应数据，可以额外绑定元素移除的事件处理逻辑，同步操作数组即可

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