Hey，这两个问题其实可以用一套思路解决——借助HTML5拖拽API配合CSS类来实现，既灵活又易维护。让我一步步给你拆解：

1. 拖拽元素时修改背景 #

首先得让元素支持拖拽：给目标元素加上draggable="true"属性。然后我们定义一个专门的CSS类，用来控制拖拽状态下的样式：

/* 拖拽状态的样式类 */
.dragging {
  background-color: #ffeb3b; /* 替换成你想要的背景色 */
}

接下来用JavaScript监听拖拽的开始和结束事件，动态给元素添加/移除这个类：

<div draggable="true" id="dragItem">我是可拖拽的元素</div>

<script>
const dragItem = document.getElementById('dragItem');

// 拖拽开始时，给元素加上样式类
dragItem.addEventListener('dragstart', () => {
  dragItem.classList.add('dragging');
});

// 拖拽结束时，移除样式类恢复原样
dragItem.addEventListener('dragend', () => {
  dragItem.classList.remove('dragging');
});
</script>

这样用户拖拽元素时，背景会立刻变成你设置的颜色，拖拽结束后自动恢复初始状态。

2. 拖拽时同时修改文本颜色与背景 #

这其实是第一个需求的延伸，只需要在刚才的CSS类里补充文本颜色的属性就行，完全不用改动JS逻辑：

.dragging {
  background-color: #ffeb3b; /* 拖拽时的背景色 */
  color: #d32f2f; /* 拖拽时的文本颜色 */
  /* 还可以额外加些视觉反馈，比如边框、透明度 */
  border: 2px solid #d32f2f;
  opacity: 0.8;
}

这种方式的好处是样式和行为完全分离，后期要调整样式直接改CSS就行，不用碰JS代码，非常方便。

额外小技巧：批量处理多个可拖拽元素 #

如果你有一堆可拖拽元素，不用挨个加事件监听，用事件委托就能搞定：

<div id="dragContainer">
  <div draggable="true">元素1</div>
  <div draggable="true">元素2</div>
  <div draggable="true">元素3</div>
</div>

<script>
const container = document.getElementById('dragContainer');

// 监听容器的拖拽开始事件
container.addEventListener('dragstart', (e) => {
  // 只处理可拖拽的元素
  if (e.target.draggable) {
    e.target.classList.add('dragging');
  }
});

// 监听容器的拖拽结束事件
container.addEventListener('dragend', (e) => {
  if (e.target.draggable) {
    e.target.classList.remove('dragging');
  }
});
</script>

这样不管容器里有多少个可拖拽元素，都能自动应用拖拽样式，代码更简洁。

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