vue实现表格拖拽排序

实现表格拖拽排序的基本思路

在Vue中实现表格拖拽排序通常需要结合HTML5的拖拽API或第三方库（如Sortable.js、Vue.Draggable）。以下提供两种主流实现方式：

使用HTML5原生拖拽API

HTML5提供了原生的拖放接口，适合轻量级需求：

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDragOver(index) {
      if (this.draggedIndex !== null && this.draggedIndex !== index) {
        const item = this.list[this.draggedIndex]
        this.list.splice(this.draggedIndex, 1)
        this.list.splice(index, 0, item)
        this.draggedIndex = index
      }
    },
    handleDrop() {
      this.draggedIndex = null
    }
  }
}
</script>

使用Vue.Draggable插件

对于更复杂的需求，推荐使用基于Sortable.js封装的Vue组件：

npm install vuedraggable

<template>
  <draggable 
    v-model="list" 
    tag="tbody"
    item-key="id"
    @end="onDragEnd"
  >
    <template #item="{ element }">
      <tr>
        <td>{{ element.name }}</td>
      </tr>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('排序完成', this.list)
    }
  }
}
</script>

关键注意事项

表格拖拽时需要确保dragover事件调用preventDefault()，否则拖放可能无法正常工作

对于复杂数据结构，建议使用唯一标识符（如id）作为key，而非数组索引

移动端支持需要额外处理触摸事件，或使用支持移动端的库如interact.js

样式优化建议

添加视觉反馈提升用户体验：

tr[draggable="true"] {
  cursor: move;
}
tr.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

通过以上方法可以灵活实现Vue中的表格拖拽排序功能，根据项目复杂度选择适合的方案。