JavaScript实现元素拖放后根据所属容器修改背景色

核心逻辑是在你现有拖拽移动卡片的功能基础上，新增「卡片放置完成后识别所属列、切换对应背景色」的步骤，完全保留原有拖拽逻辑，不需要重构现有代码。

列与颜色对应规则 #

先明确三个容器和目标颜色的映射关系：

• 待办列（外层容器id为div1，包含cell1~cell5）：卡片保持深灰色 rgb(80,80,80)
• 进行中列（外层容器id为div2，包含cell6~cell10）：卡片显示橙色
• 已完成列（外层容器id为div3，包含cell11~cell15）：卡片显示绿色

具体修改步骤 #

1. （可选优化）精简冗余CSS #

你当前代码给每个卡片、单元格单独写了重复样式，可以抽成通用类减少代码量，不做这步优化也不影响功能实现。
把原来#box1到#box5的重复样式全部删除，替换为通用卡片类：

.task-card {
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
  background-color: rgb(80, 80, 80); /* 默认灰色，符合初始状态要求 */
}

给HTML中所有box元素加上这个类即可，示例：

<div id="box1" class="task-card" draggable="true" ondragstart="boxDrag(event, 1)">#1</div>

单元格的重复样式也可以抽成.cell通用类，替换原来#cell1到#cell15的重复代码。

2. 修改拖拽放置函数，新增颜色切换逻辑 #

只需要在卡片成功追加到目标单元格后，向上查找它所属的外层列容器，根据列id设置对应背景色即可，修改后的完整JS代码如下：

let emptyCell = "cell4";

function boxOver(event) {
  event.preventDefault();
}

function boxDrag(event, boxNumber) {
  event.dataTransfer.setData("text", boxNumber.toString());
}

function boxDrop(event, cellNumber) {
  event.preventDefault();
  let boxNumber = event.dataTransfer.getData("text");

  let draggedBox = document.getElementById("box" + boxNumber);
  let targetCell = document.getElementById("cell" + cellNumber);

  if (targetCell.innerHTML.trim() === "") {
    emptyCell = draggedBox.parentNode.id;
    targetCell.appendChild(draggedBox);
    
    // 新增：识别所属列自动切换卡片颜色
    const parentColumn = targetCell.parentElement;
    switch(parentColumn.id) {
      case "div1": // 待办列
        draggedBox.style.backgroundColor = "rgb(80, 80, 80)";
        break;
      case "div2": // 进行中列
        draggedBox.style.backgroundColor = "orange";
        break;
      case "div3": // 已完成列
        draggedBox.style.backgroundColor = "green";
        break;
    }
  }
}

效果说明 #

• 页面初始加载时所有卡片默认显示灰色，符合要求
• 拖拽卡片到任意空单元格放置后，会自动根据所属列切换颜色，拖回待办列会自动恢复灰色
• 原有拖拽占位、空单元格判断逻辑完全保留，不会破坏现有功能
• 后续如果新增列或者调整单元格位置，不需要修改颜色判断逻辑，只要识别外层列id即可自动适配

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