如何通过event.target实现拖拽时v-list-item列表项背景变色？

你遇到的问题是事件目标命中规则导致的：拖拽经过子元素时，dragenter事件的target是或这类子元素，无法匹配你写的event.id === 'projectlist'判断，所以样式不生效。另外注意所有共用同一个id="projectlist"不符合HTML规范，id必须全局唯一，建议改为用类名做判断标识。

下面是可直接落地的优化方案：

方案1：修改现有逻辑（最快生效） #

调整dragenter方法逻辑，不管当前命中的是哪个子元素，都向上查找最近的父元素再修改样式，配套的clearDrag方法也要同步修改：

dragenter (evt) {
  // 向上查找最近的class为project的列表项元素
  const listItem = evt.target.closest('.project')
  if (listItem) {
    listItem.style.background = '#0061ff'
    listItem.style.color = 'white'
  }
}
// 同步修改清除样式的方法
clearDrag (evt) {
  const listItem = evt.target.closest('.project')
  if (listItem) {
    // 恢复默认样式，可根据你的项目原有样式调整
    listItem.style.background = ''
    listItem.style.color = ''
  }
}

方案2：用CSS类控制样式（更易维护） #

推荐优先用类名控制样式，避免直接操作DOM样式，后续调整样式只需要改CSS即可：

1. 先在样式文件中新增拖拽态样式：

.project.drag-over {
  background: #0061ff !important;
  color: white !important;
}

2. 修改事件方法：

dragenter (evt) {
  const listItem = evt.target.closest('.project')
  listItem?.classList.add('drag-over')
}
clearDrag (evt) {
  const listItem = evt.target.closest('.project')
  listItem?.classList.remove('drag-over')
}

可选优化：解决拖拽经过子元素时样式闪烁问题 #

如果出现拖拽经过子元素时背景闪一下的问题，是因为子元素触发了父元素的dragleave事件，可以用计数器逻辑优化：

// 进入时计数+1，只有第一次进入父元素时加样式
dragenter (evt) {
  const listItem = evt.target.closest('.project')
  if (!listItem) return
  listItem.dragEnterCount = (listItem.dragEnterCount || 0) + 1
  if (listItem.dragEnterCount === 1) {
    listItem.classList.add('drag-over')
  }
}
// 离开时计数-1，计数归0才移除样式
clearDrag (evt) {
  const listItem = evt.target.closest('.project')
  if (!listItem) return
  listItem.dragEnterCount = (listItem.dragEnterCount || 0) - 1
  if (listItem.dragEnterCount <= 0) {
    listItem.classList.remove('drag-over')
    listItem.dragEnterCount = 0
  }
}
// drop事件中要重置计数和样式
onDrop(evt, project) {
  const listItem = evt.target.closest('.project')
  if (listItem) {
    listItem.classList.remove('drag-over')
    listItem.dragEnterCount = 0
  }
  // 原有drop的业务逻辑保留即可
}

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