VueJS实现v-for渲染项的拖拽事件动态切换类

嘿，我来帮你搞定这个拖拽时给<li>元素切换类的需求！其实有两种常见的思路，一种是直接操作DOM（适合简单场景），另一种是用Vue的响应式数据绑定（更符合Vue的最佳实践），我都给你详细说说：

方法一：通过事件对象获取当前元素并操作DOM #

首先，你可以在调用事件处理函数时传递Vue内置的$event对象，这样就能在方法里拿到触发事件的当前元素：

模板代码修改： #

<li 
  v-for="group in groupList" 
  :key="group.id" 
  @dragenter="toggleClass($event)"
  @dragleave="toggleClass($event)"
> 
  Content 
</li>

对应的方法实现： #

methods: {
  toggleClass(event) {
    // 获取当前绑定事件的<li>元素，用currentTarget比target更稳妥（target可能是子元素）
    const currentLi = event.currentTarget;
    // 用原生DOM的classList.toggle方法切换类，比如你的类名叫'drag-over'
    currentLi.classList.toggle('drag-over');
  }
}

这里要注意event.currentTarget和event.target的区别：currentTarget永远是绑定事件的那个<li>元素，而target可能是<li>内部的子元素（如果有的话），所以用currentTarget能避免意外问题。

方法二：用Vue响应式数据绑定类（推荐） #

Vue的核心是数据驱动视图，直接操作DOM虽然能解决问题，但更优雅的方式是给每个group对象添加一个状态属性，通过绑定:class来控制类的切换：

第一步：初始化数据时给每个group添加状态 #

假设你的groupList是初始化或从接口获取的，给每个item加上isDragging属性：

data() {
  return {
    groupList: [
      // 假设原有数据结构
      { id: 1, name: 'Group 1' },
      { id: 2, name: 'Group 2' }
    ].map(group => ({ ...group, isDragging: false })) // 给每个group添加状态属性
  }
}

如果是异步获取数据，就在拿到数据后处理：

async mounted() {
  const res = await fetch('你的接口地址');
  const rawData = await res.json();
  this.groupList = rawData.map(group => ({ ...group, isDragging: false }));
}

第二步：修改模板绑定类和事件 #

<li 
  v-for="group in groupList" 
  :key="group.id" 
  @dragenter="group.isDragging = true"
  @dragleave="group.isDragging = false"
  :class="{ 'drag-over': group.isDragging }"
> 
  Content 
</li>

如果需要更复杂的判断逻辑（比如只允许特定元素触发拖拽状态），可以把逻辑放到方法里：

<li 
  v-for="group in groupList" 
  :key="group.id" 
  @dragenter="handleDragEnter(group)"
  @dragleave="handleDragLeave(group)"
  :class="{ 'drag-over': group.isDragging }"
> 
  Content 
</li>

对应的方法实现：

methods: {
  handleDragEnter(group) {
    // 这里可以加自定义判断，比如检查拖拽的元素类型
    group.isDragging = true;
  },
  handleDragLeave(group) {
    group.isDragging = false;
  }
}

这种方式完全不用操作DOM，所有状态都由数据驱动，更符合Vue的设计理念，也更容易维护和调试。

补充小提示 #

如果用第一种方法操作DOM，记得在组件销毁时清理可能的残留状态（不过拖拽事件一般不会有遗留，但好习惯还是要有的）；第二种方法则完全不用担心，数据会随着组件销毁自动回收。

内容的提问来源于stack exchange，提问作者Sainath S.R