vue实现拖拽表格

Vue 实现拖拽表格的方法

使用第三方库（推荐）

推荐使用 vuedraggable 或 sortablejs 这类成熟的拖拽库，它们对 Vue 有良好支持且功能丰富。

安装 vuedraggable：

npm install vuedraggable

示例代码：

<template>
  <draggable v-model="tableData" tag="table" class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

原生 HTML5 拖拽 API

对于简单需求，可以直接使用 HTML5 的拖拽 API 配合 Vue 事件处理。

基本实现步骤：

<template>
  <table>
    <tbody>
      <tr 
        v-for="(item, index) in tableData" 
        :key="item.id"
        draggable="true"
        @dragstart="handleDragStart(index)"
        @dragover.prevent
        @drop="handleDrop(index)"
      >
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDrop(index) {
      const item = this.tableData[this.draggedIndex]
      this.tableData.splice(this.draggedIndex, 1)
      this.tableData.splice(index, 0, item)
    }
  }
}
</script>

高级功能扩展

对于需要更复杂交互的场景，可以结合以下功能：

• 跨表格拖拽：使用 group 属性（vuedraggable）
• 拖拽手柄：通过 handle 属性指定可拖拽区域
• 动画效果：添加 CSS transition 或使用库内置动画
• 拖拽状态样式：通过 dragClass 和 ghostClass 自定义样式

示例配置：

<draggable 
  v-model="list"
  group="items"
  handle=".handle"
  animation="200"
  ghost-class="ghost-item"
>
  <!-- 表格内容 -->
</draggable>

注意事项

• 数据绑定：确保使用 v-model 或正确更新数据源
• 性能优化：大数据量时考虑虚拟滚动
• 移动端适配：测试触摸设备上的交互体验
• 辅助功能：为可访问性添加 ARIA 属性